라우터가 없는 NEXT에서 header를 만들때 어떻게 만들어야하는지 막막했다.
일단 라우팅이 되는 과정은 알겠는데, APP파일이나 라우터 파일이 없으니 헷갈렸다.
1. Header 파일을 따로 만들기
header는 여기저기 다 쓰이기 때문에 molecules라는 폴더를 src에 만들어서 페이지를 만들어주었다.
2. 최상위 layout 찾기
여러 하위 경로에서 공통으로 사용하는 UI는, 각 라우팅 폴더의 layout.tsx 컴포넌트에 작성해야한다. 우리 프로젝트는 main은 물론 여기저기 다 쓰일 거기 때문에 최상위 layout에 넣어주었다.
layout은,
children Prop을 사용하며, {children} 부분에는 같은 레벨에 있는 page.tsx 컴포넌트를 출력한다.
이렇게 layout 부분에 넣어주면 header가 나오는걸 볼 수 있ㄷ아.
return (
<html lang="en">
<body className={inter.className}>
<Header />
{children}
<Footer />
</body>
</html>
);Q. 그럼 header도 page.tsx라고 해야하나요?
정답은 NO다. page를 쓰는건 경로를 써야할때이다. 즉 리액트에서 router = page 라고 생각하면 된다. header는 import 해야하기 때문에 그냥 Header.tsx 또는, Navigation.tsx 라고 명명하면 된다.
