Next 특정 버전 부터 app router 형식이 추가되었습니다.
전 주로 page router 형식만 다루었어서
공부차 app router에 대해 다루어 보려고 합니다.
기본적인 차이는 스택오버플로우 형님이 아래 표로 정리해주셨습니다.
[page.tsx]
기본적으로 이런 구조를 가진다.
app 폴더에서 page.tsx가 처음으로 렌딩될 페이지 이다.
여기서 새로운 페이지를 추가하려면 폴더와 함께 새로운 page.tsx를 생성해준다.
그러고나면 /main 경로로 페이지가 추가가된다.
*여기서 프로출신들이 사용한다는 야무진 방법하나 추가*
(물론 프로출신이란 말은 죠큽니다.)
폴더 이름에 괄호'( )' 로 감쌀 수 있습니다. 이를 통해서 디폴트 그룹으로 묶을 수 있습니다!
위 처럼 (main)으로 폴더 명을 만들어두면 디폴트 페이지가 되고,
접근하려고 할때 /main 이 아닌 / 으로 바로 접속가능합니다!
물론 이때에는 기존에 /app에 있었던 page.tsx 파일을 삭제해주어야 한다는것~!
있다면 (main)을 만들어도 루트에 있는 page.tsx를 바라봅니다.
( ) 괄호 스킬을 여러 폴더에 걸쳐서 사용할 수도 있는데,
어플리케이션의 커다란 분기를 나눌때도 사용할 수 있습니다.
위처럼 큰 분기를 (app), (web) 두개로 나누어서 개발을 하고 page.tsx에서
아래와 같이 분기를 쳐주면 모바일일 경우 (app) 폴더에서, 웹일 경우 (web) 폴더에서
디폴트 경로가 설정되게 됩니다!
export default function MainPage() {
return isMobile ? <MobileMain /> : <DesktopMain />;
}
[layout.tsx]
page.tsx 파일과 함께 있는 것이 layout.tsx 파일이다.
이는 여러 라우터들이 같이 공유하는 UI라고 생각하면 편하다.
이 layout 상에서는 상태가 보존되고 리렌더링이 발생하지 않는다.
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
);
}
기본적인 레이아웃의 코드인데, 해당 {children} 부분에 라우터가 들어온다고 생각하면 됩니다.
위에 만든 main 폴더안에도 layout을 새로 선언해줄 수 있습니다. 다만 최상단 /app 밑에는
반드시 layout.tsx파일이 있어야 합니다
또한 layout.tsx은 기본적으로 상위에서부터 중첩되어 적용된다.
main폴더에 layout을 만들었다고 해당 레이아웃만 적용되지 않고,
최상단에 존재하는 layout.tsx가 적용된 상태에서 추가적으로 적용된다.
아래는 NEXT에서 제공해주는 이해를 돕기위한 그림이다.
요롷고롬 dashboard 하위에 있는 layout은
최상단 layout속으로 들어갑니다.
보통 예전부터 있던 프로젝트에서만 개발을 진행하다보면
익숙하지 않은 새로운 구조가 나온 경우가 좀 있는것 같아요.
페이지 라우팅만 하다가 앱 라우터를 가볍게 알아보니 새롭군요..
이런게 개인의 뚝딱거림이 필요하다는 이유중 하나 아닐까 싶군요
참고 : https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts ㅁㄴ
'Front-end' 카테고리의 다른 글
| Recoil, 서당개도 입학과 동시에 할수있는 상태관리 (1) | 2024.07.11 |
|---|---|
| The pseudo class “:first-child” is potentially unsafe when doing server-side rendering. 알아보기 (0) | 2024.07.09 |
| 로그인 후, 기존페이지로 리다이렉트 하기 (0) | 2024.06.29 |
| TypeError: Cannot read properties of null (reading 'useContext') useContext (feat. useLocation 이노오옴!) (0) | 2024.06.28 |
| Nextjs, 서버사이드 page props 크기 확인해보기 (54) | 2024.06.26 |