next 13부터 app router가 나왔다 그전에는 page router로 페이지를 라우팅 했었다
app router를 알아보기 전에 pages router에 대해 간단히 알아보자
pages router
page router는 pages 디렉토리 안에서 js, jsx, ts, tsx 파일의 이름을 기준으로 라우팅을 하는 방식이다
만약 index.tsx라는 파일을 만든다면 /경로에 페이지가 보여지고
survey/main/index.tsx라는 파일을 만든다면 /servey/main경로에 페이지가 보여지게 되는 방식이다
단점
중첩된 경로가 많아진다면 파일 이름도 길어진다는 단점이 있는거 같고
사실 나는 pages router를 사용해 보지 않아 다른 단점들은 더 찾아봐야 할거 같다
+ 추가로 찾아본 결과 server component를 사용하지 못한다고 한다
app router
- 정적 라우팅
- 이중 라우팅
- 동적 라우팅
- 레이아웃
- 그룹 라우팅
정적 라우팅
app router는 pages router와 달리 디렉토리의 이름을 기준으로 라우팅을 한다!
이게 무슨 말인지 잘 이해가 안될수도 있는데 사진으로 본다면 이해가 더 잘 될 것이다
이렇게 app 디렉토리에서 바로 page.tsx 파일을 만들면 / 경로에 페이지가 보여지게 되고
위의 예시처럼 mypage 디렉토리를 만들고 그안에 page.tsx 파일을 만들면 /mypage 경로에서 페이지를 볼 수 있게 된다
이중 라우팅
만약 /mypage/account라는 경로에 페이지를 보여주소 싶다면 어떻게 해야할까?
방법은 바로 mypage 디렉토리 안에 account 디렉토리를 만드는 것이다!
동적 라우팅
만약 url에 유저의 아이디를 넣는다던지 ex) mypage/gaoooon
아니면 url에 자신이 찾고 싶은 검색어를 넣는다던지 ex) search/macbook
이럴때는 정적 라우팅으로 경로를 만들어 둔것도 아닐텐데 어떻게 하는 걸까?
이때는 디렉토리를 만들때 []로 감싸주면 된다
[]로 감싸주고 만약 동적인 값을 받아 활용하고 싶다면 useParams hook을 사용하면 된다
const { id } = useParams();
+ 추가로 찾아본결과 함수의 인자로 동적인 값을 가져올 수 있다
레이아웃
app router에서는 라우팅 기능 말고도 레이아웃이라는 기능을 제공한다
레이아웃은 같은 경로간에 UI를 공유하는 기능이다
레이아웃 파일은 이름을 layout.tsx 형식으로 만들어야 하고 위치는 app 디렉토리 안에 어디에든 있을수 있다
layout은 같은 위치와 app 디렉토리를 트리보았을때 하위 레벨에 있는 페이지에서 UI를 보여 줄 수 있다
import { Header } from '@/components';
export default function HeaderLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<>
<Header />
{children}
</>
);
}layout 파일에서는 children prop를 받는데 childern은 page.tsx에 있는 react node이다
루트 레이아웃
루트 레이아웃 파일은 무조건 있어야 하고 위치는 app 디렉토리 root 위치에 있어야 한다
또한 root layout 파일에에는 무조건 <html>와 <body>가 있어야 한다
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>{children}</body> // childern은 경로에 맞게 보여주는 페이지이다
</html>
);
}
그룹 라우팅
그룹 라우팅은 path를 나누는게 아니고 특정 경로에만 layout을 적용 시키고 싶을때 사용한다
위의 사진과 같이 / 경로에는 header를 적용 시키고 싶지 않고
/mypage, /search 경로에는 header를 적용 시키고 싶을때 이럴때 사용할수 있다
import { Header } from '@/components';
export default function HeaderLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<>
<Header />
{children}
</>
);
}
마무리
나는 이제 막 next를 공부하는데 react에서는 따로 라이브러리를 설치하고 코드를 짜야 했지만
next에서는 폴더만 만들면 바로 라우팅이 가능하다는게 너무 신세계였다 그리고 병렬 라우팅, 인터셉트 라우팅 기술이 더 있는데
나는 아직 그 기능들이 필요하다고 생각이 들지 않아서 따로 정리를 하지는 않았다 만약 나중에 next를 활용해 프로젝트를 할 때
필요하다고 생각이 든다면 따로 정리를 해서 올려 보겠다!