๋ฐ˜์‘ํ˜•

expo router 2

expo router ๋กœ ์ฒ˜์Œ๋ถ€ํ„ฐ ์•ฑ ๊ฐœ๋ฐœ ๋ช…๋ น์–ด ์ด์ •๋ฆฌ , android react native ๊ฐœ๋ฐœ

1. expo router  ํ”„๋กœ์ ํŠธ ์ƒ์„ฑ npx create-expo-app@latest -e with-router margin-calculator margin-calculator๋Š” ์ƒ์„ฑํ•  ์ด๋ฆ„ 2, expo go ์•ฑ ์„ค์น˜ ,  npm run android - npm run ios npx expo start๋กœ ์‹คํ–‰ํ•˜๊ณ  ๊ฐœ๋ฐœํ•˜๊ธฐ expo router ๊ธฐ๋ณธ ํ”„๋กœ์ ํŠธ ๊ตฌ์กฐapp/  โ”œโ”€โ”€ (tabs)                   // ํƒญ ๋„ค๋น„๊ฒŒ์ด์…˜ ๊ทธ๋ฃน  โ”‚   โ”œโ”€โ”€ _layout.tsx         // ํƒญ ๋„ค๋น„๊ฒŒ์ด์…˜ ๋ ˆ์ด์•„์›ƒ  โ”‚   โ”œโ”€โ”€ index.tsx           // ํ™ˆ ํƒญ ์Šคํฌ๋ฆฐ  โ”‚   โ”œโ”€โ”€ profile/            // ํ”„๋กœํ•„ ๊ด€๋ จ ์Šคํƒ ๋„ค๋น„๊ฒŒ์ด์…˜  โ”‚   โ”‚   ..

Expo Router๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ํŒŒ์ผ ๊ธฐ๋ฐ˜ ๋ผ์šฐํŒ… ์‹œ์Šคํ…œ ๊ตฌ์กฐ

Next js์™€ ๋น„์Šทํ•œ Expo Router Expo Router๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ํŒŒ์ผ ๊ธฐ๋ฐ˜ ๋ผ์šฐํŒ… ์‹œ์Šคํ…œ์€ Next.js์™€ ๋น„์Šทํ•œ ๋ฐฉ์‹์œผ๋กœ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค. ์ „์ฒด์ ์ธ ๊ตฌ์กฐ๋ฅผ ์„ค๋ช…ํ•ด๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค:app/โ”œโ”€โ”€ _layout.tsx          # ๋ชจ๋“  ๋ผ์šฐํŠธ์— ์ ์šฉ๋˜๋Š” ๊ณตํ†ต ๋ ˆ์ด์•„์›ƒโ”œโ”€โ”€ index.tsx           # ๋ฉ”์ธ ํ™ˆ ํ™”๋ฉด (/)โ”œโ”€โ”€ calculator/โ”‚   โ”œโ”€โ”€ _layout.tsx     # ๊ณ„์‚ฐ๊ธฐ ๊ด€๋ จ ํ™”๋ฉด๋“ค์˜ ๊ณตํ†ต ๋ ˆ์ด์•„์›ƒโ”‚   โ”œโ”€โ”€ index.tsx       # ๊ณ„์‚ฐ๊ธฐ ๋ฉ”์ธ ํ™”๋ฉด (/calculator)โ”‚   โ””โ”€โ”€ history.tsx     # ๊ณ„์‚ฐ ํžˆ์Šคํ† ๋ฆฌ ํ™”๋ฉด (/calculator/history)โ”œโ”€โ”€ settings/โ”‚   โ””โ”€โ”€ index.tsx       # ์„ค์ •..

๋ฐ˜์‘ํ˜•