Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- 부트캠프 #개발일지 #TIL #FlexboxFroggy #displayflex #flexbox
- useEffect
- 부트캠프 #CSS #개발일지 #TIL
- useState
- 개발일지 #TIL #프론트엔드 #HTML
- 부트캠프
- JS예제
- 부트캠프 #개발일지 #TIL #그리드 #CSS
- CSS
- Til
- 부트캠프 #스파르타코딩클럽 #개발일지# #html
- 부트캠프 #스파르타코딩클럽 #개발일지# #TIL #Javascript #confirm #location.href
- 깃허브오류
- appendChild
- 부트캠프 #코딩 #개발일지 #프론트엔드 #CSS #TIL
- 부트캠프 #CSS #개발일지 #TIL #박스모델
- 부트캠프 #개발일지 #TIL #CSS속성 #float #clear
- 특성선택자
- 리액트
- 알고리즘
- ㅜㄹㄹ
- 부트캠프 #개발일지 #TIL #Position #위치
- 의사클래스
- React
- 개발일지
- textContent
- 결합선택자
- querySelector
- js
- 템플릿스트링
Archives
- Today
- Total
나의 개발일지
[Next.Js] Layouts 사용하기 본문
app > layout.tsx
import Navigation from "../components/navigation";
export default function RootLayout({children}: {children: React.ReactNode;}) {
return (
<html lang="en">
<body>
<Navigation />
{children}
</body>
</html>
);
}
layout.tsx 파일을 만들어 사용할 layout의 내용을 작성해주면 된다.
layout을 사용하는 원래 페이지에서 보여줄 내용은 children으로 받아서 사용한다.
만약 여기서 about-us의 레이아웃만 다르게 바꾸고 싶다면
about-us 폴더 안에 또 다른 layout.tsx 파일을 만들면 된다.
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<div>
{children}
© Next JS is great!
</div>
);
}
중첩된 레이아웃
폴더 내에 정의된 레이아웃(예: app/about-us/layout.tsx)은 특정 경로 세그먼트에 적용되고 해당 세그먼트가 활성화될 때 렌더링된다. 기본적으로 파일 계층 구조의 레이아웃은 중첩된다. 즉, child props 통해 자식 레이아웃을 래핑한다.
우선 폴더 구조는 이렇다
about-us에도 레이아웃 파일이 있고, sales에도 레이아웃 파일이 있는 상태!
그리고 sales의 레이아웃에 $ 를 입력해보고 이 상태에서 sales page를 확인해보자
app > about-us > company > jobs > sales > layout.tsx
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<div>
{children}
$$$$$$$
</div>
);
}
about-us의 layout 내용과 sales의 layout 내용이 같이 나타나는 것을 볼 수 있다.
상위 폴더로 이동하여 레이아웃이 있는지 확인하고 레이아웃이 있는 경우에 이 레이아웃을 사용하여 하위 항목을 렌더링하는 것이다.
<Layout>
<AboutUsLayout>
<Sales />
</AboutUsLayout>
</Layout>
이런 식의 구조를 NextJS가 실제로 해주고 있는 것이다.
'Next.Js' 카테고리의 다른 글
[Next.JS] Data Fetching (0) | 2024.03.23 |
---|---|
[Next.JS] Route groups | Metadata | Params (0) | 2024.03.20 |
[Next.Js] Navigation / usePathname (0) | 2024.03.05 |
[Next.Js] 404 페이지 / Not-Found Errors 처리 (0) | 2024.03.04 |
[Next.Js] Page router와 다른 점 / App Router를 사용하는 이유 / 설치 및 Routing (0) | 2024.02.28 |