๐์ค๋ ๋ฐฐ์ด ๊ฒ
nextJS๋ก ๊ณตํต ๋ ์ด์์ ๊ตฌํํ๊ธฐ
์งํํ๋ ํ๋ก์ ํธ ๋ ์ด์์ ์์ ์ ํ๋ฉด์ ๋ ์๋ชจ์ ์์ธํ์ด์ง์ ๋ ์๋ชจ์ ์ฑํ ํ์ด์ง๊ฐ ๊ฐ์ ํญ์ ๊ณต์ ํ๊ณ ์์ด์ ํด๋น ํ์ด์ง ๊ฐ์ ๊ณตํต ๋ ์ด์์์ ์์ ํด์ผ ํ๋ค.
react๋ฅผ ์ฌ์ฉํ ๋ react router์ nested routes๋ฅผ ์ด์ฉํด์ ๊ฐ๋จํ๊ฒ ๊ตฌํํ ์ ์์๋๋ฐ nextjs์์๋ ์ด๋ค ์์ผ๋ก ๊ตฌํํ ์ ์์์ง ๊ฐ์ด ์์กํ๋ค. ๊ทธ๋์ ๊ณต์๋ฌธ์๋ฅผ ์ฐพ์๋ณด๋ ์ค
https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts
Per-Page Layout์ด๋ผ๋ ์น์ ์ ๋ฐ๊ฒฌํ๊ณ ํด๋น ๋ฐฉ๋ฒ์ ์ ์ฉํ๊ธฐ๋ก ํ๋ค.
๋จผ์ ๊ณตํต ๋ ์ด์์์ ๊ฒฝ์ฐ ๊ทธ๋ฅ ์ปดํฌ๋ํธ ๋ง๋ค์ด์ ๋ฐ๋ก ์ ์ฉํ๋ฉด ๋์๋๋ฐ ๋ถ๋ถ ํ์ด์ง์์๋ง ์ฌ์ฉํ๋ ๊ณตํต ๋ ์ด์์์ ๊ฒฝ์ฐ ์ถ๊ฐ ์์ ์ด ํ์ํ๋ค.
์ผ๋จ ์งํํ ๊ฒ์ ๊ณตํต ๋ ์ด์์์ ์ ์ํ layout ์ปดํฌ๋ํธ๋ฅผ ๋ง๋๋ ๊ฒ์ด์๋ค. ์ด ์ธ์๋ ๋ค์ํ ๋ ์ด์์ ์ปดํฌ๋ํธ๋ค์ด ๋์ฌ ๊ฒ ๊ฐ์์ layout์ด๋ผ๋ ํด๋๋ฅผ ๋ง๋ค์ด์ ํ์์ ์์ฑํด์ฃผ์๋ค.
์ด๋ ๊ฒ ์ค์ ํ ๋ ์ด์์์ ํด๋น ์ปดํฌ๋ํธ๋ค์์ ์ฌ์ฉํ ์ ์๋๋ก getLayout์ ์ฌ์ฉํ์๋ค.
ํด๋น ๋ ์ด์์์ ์ฌ์ฉํ๋ ค๋ ์ปดํฌ๋ํธ์ getLayout ํ๋กํผํฐ๋ฅผ ์ถ๊ฐํ์ฌ ํด๋น ํ์ด์ง์ ๋ ์ด์์์ ์ ์ฉํ๋ค. ๊ทธ๋ฆฌ๊ณ ์ด getLayout์ ์ ์ฉ์ํค๊ธฐ ์ํด _app์์ ์ค์ ํด์ฃผ์ด์ผ ํ๋ค. ๊ธฐ์กด์๋ ๊ทธ๋ฅ ์ปดํฌ๋ํธ๋ค์ด ๋ฐ๋ก ๋ ๋๋ง์ด ๋์๋ค๋ฉด ์ง๊ธ์ getLayout์ด ์์ ๋ ํด๋น ๋ ์ด์์์ ๊ฑฐ์ณ์ ๋ ๋๋ง๋ ์ ์๋๋ก ํด์ค์ผํ๋ค.
๊ทธ๋์ ์ด๋ ๊ฒ ์ปดํฌ๋ํธ์ getLayout์ด ์๋ค๋ฉด ํด๋น ๋ ์ด์์์ ์ ์ฉํ๊ณ ์๋ค๋ฉด ๊ณตํต ๋ ์ด์์์ ์ ์ฉํ๋๋ก ํด์ฃผ์๋ค.
์ด๋ ๊ฒ ์ค์ ํจ์ผ๋ก์จ Layout.tsx์์๋ ์ ์ฒด ๊ณตํต ๋ ์ด์์์ ์ค์ ํ ์ ์๊ฒ ๋์๊ณ ํ์ํ ํ์ด์ง๋ง๋ค ๋ถ๋ถ ๊ณตํต ๋ ์ด์์์ ์ถ๊ฐ๋ก ์ค์ ํ ์ ์๊ฒ ๋์๋ค!
๐ญ๋ฐฐ์ด ์
์ฒ์์๋ ์๋ฌด๋๋ ์ต์ํ ๋ฐฉ๋ฒ์ด ํธํ๊ฒ ๋๊ปด์ ธ์ react๋ react router๋ก ์ค์ฒฉ ๋ผ์ฐํ ์ด๋ outlet ์ฌ์ฉํ๋ฉด ๋ฐ๋ก ์ ์ฉ๋๋๋ฐ ์ด ๊ณผ์ ์ ์กฐ๊ธ ๋ฒ๊ฑฐ๋กญ๊ฒ ๋๊ปด์ง๊ธฐ๋ ํ๊ณ ์ฒ์ ๋ณผ ๋ ์ ์ดํด๊ฐ ์๋๋ค๊ณ ๋๊ปด์ง๊ธฐ๋ ํ๋ค. ํ์ง๋ง ๊ณต์๋ฌธ์์ ์์๋ค์ ๋ณด๊ณ ์ ์ฉํด๋ณด๋ ๋ณด์ด๋ ๊ฒ๋งํผ ์ด๋ ค์ด ๊ณผ์ ์ด ์๋์์์ ์๊ฒ๋์๋ค. ๋ํ ๊ณต์๋ฌธ์์์ ๋ง์ฝ ํ์ ์คํฌ๋ฆฝํธ๋ฅผ ์ฌ์ฉํ๋ ๊ฒฝ์ฐ์ ๋ํ ํ์ ์์๋ ๋ณด์ฌ์ค์ ๋ฌด๋ฆฌ์์ด ์ ์ฉํ ์ ์์๋ค. nextjs๋ง์ ํน์ง๋ค์ ๋ง์ด ์ฌ์ฉํด๋ณด๊ณ ์ถ๋ค๋ ์๊ฐ์ด ๋ค์๋ค!
'์ผ์ > Today I Learned' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
2023.06.02[nextjs] (0) | 2023.06.02 |
---|---|
2023.06.01 [color-thief-react] (0) | 2023.06.01 |
2023.05.17[์ต์ ์ ์ฅ ํธ๋ฆฌ] (0) | 2023.05.17 |
2023.05.16 (0) | 2023.05.16 |
2023.05.04[์น ์ ๊ทผ์ฑ] (0) | 2023.05.04 |