Not Found는 Next.js에서 404 에러가 발생했을 때 렌더링되는 페이지이다.
일반적인 사용 방법은 Not Found 가 필요한 위치에 not-found.jsx 파일을 만들어주면 끝이다.
근데 한가지 이상한 점이 있었다.
모든 페이지에 Header와 Footer라 필요해서 app 폴더 아래에 있는 layout에게 Header와 Footer를 불러왔다.
const RootLayout = () => {
return (
<html>
<body>
<Header />
{children}
<Footer />
</body>
</html>
)
};
export default RootLayout;
사건 재현을 위해서 Header와 Footer에는 특별한 기능이 있는 것은 아니고 간단한 문자만 렌더링 했다.
그 결과는 당연히 page 컴포넌트 위 아래에 Header와 Footer가 잘 렌더링 된다.
예를들어 [ /, /community, /board, /board/[id] ] 경로가 있다고 생각하자
여기서 사용자가 /shop 이라는 페이지를 들어갔을 때 404 오류가 나오면서 오류 화면을 렌더링 시켜줘야 했다.
그러므로 root 경로에 not-found 파일을 만들어서 오류 문구를 렌더링 시켜줬다.
const NotFound = () => {
return <div>난 오류 문구요!</div>;
};
export default NotFound;
이론상 404 화면이 렌더링 되면 다른 어떤 UI도 나오지 않고 NotFound 요소만 나와야 할 것이다.
이제 결과를 보자 :
오류 결과는 Header와 Footer가 포함된 not-found 페이지가 렌더링이 되었다.
그렇다면 Layout에서는 Header와 Footer를 사용하면 안되는 것일까?
공식 문서를 보면 layout에서 공유할 UI 요소, header나 sidebar를 넣으라고 한다.
그러면 Next.js에서 버그가 있어서 이런걸까?
당장 개발을 위해서 나는 어쩔 수 없이 NotFound 컴포넌트에게 [ position: fixed ]를 주고 오류 화면을 처리했다.
하지만 분명 방법이 있을 것 같아서 이것 저것 테스트를 하는 도중 방법을 찾았다.
우선 위와 같은 결과가 발생하는 이유는 RootLayout이라는 특이 케이스 때문으로 보인다.
[ /child ] 경로에 Nav와 Header를 Layout에 넣어주고 처리하면 문제 없이 처리가 된다.
그렇다면 RootLayout에서만 컴포넌트가 지워지지 않는 것인데, 앞으로 작업할 때 무조건 자식 경로를 만들고
그쪽에 Layout을 만들어야 하는 것인지 고민이 들던 그때!
Route Group 이라는 기능이 생각났다.
(그룹명) 폴더를 만들면 url에는 경로가 추가되지 않지만 해당 폴더 아래에 있는 경로를 하나로 묶을 수 있다.
그리고 해당 그룹에게 Layout과 Not Found를 준다면 해결되지 않을까?
즉시 시도를 해봤는데, 역시 가능했다.
RootLayout과 동일한 레이아웃 구조를 Route Group에 만들어주고 처리 하는 방식이 가능했다.
정리하면.
RootLayout의 요소는 다른 페이지의 기능으로 사라지지 않는다.
지금와서 생각해보면 당연한게 Layout 요소가 제대로 렌더링되지 않는다면 RootLayout에 있는 html 태그나 body 태그가
없어지는 문제가 생길 수 밖에 없을 것이다.
그런 이유로 next.js에서는 오류가 발생하더라도 RootLayout의 요소는 남겨두는 것 같다.
이 문제를 해결하기 위해서는 RootLayout이 아닌 자식 요소에게 Layout을 줘야하는데,
글쓴이가 택한 방식은 Route Group을 사용해서 가상으로 그룹을 만들어서 묶어준 다음 layout을 주는 방식으로
처리했다.
'Next.js > 실험실' 카테고리의 다른 글
| Next.js Layout.js (1) | 2024.07.04 |
|---|---|
| Next.js Atomic Design Pattern 그 모시깽한 모시깽 (1) | 2024.06.30 |
| 포괄 검색어로 홈페이지 노출시키기 (2) | 2024.06.09 |
| NextJS 근본적인 여정 (1) | 2024.06.02 |
| NextJS Pages Router에서의 Styled Components (1) | 2024.05.30 |