[11장][주하] Next.js 13과 리액트 18

[hayamaster]

퀴즈

NextJS 13 버전 이후 부터 app 내부 폴더가 가질 수 있는 파일들은 예약어로 제한됩니다. (layout, page, loading 등)
예약어 중에는 특정 라우팅별로 서로 다른 에러 UI를 보여줄 수 있는 컴포넌트인 error.js 가 존재합니다.
에러 바운더리는 클라이언트에서 동작하므로 error.js는 클라이언트 컴포넌트이어야 합니다.
같은 수준 폴더의 layout에서 에러가 발생할 경우 error 컴포넌트로 이동하게 되는지, 이동하지 않는지에 대해 답변해주세요.
만약 error 컴포넌트로 이동하지 않을 경우, 그 이유를 간단하게 설명해주시고, 어떻게 하면 layout에서 발생한 에러를 처리할 수 있을지 한 가지 방법만 답변해주세요.

답

정답

같은 수준 폴더의 layout에서 에러가 발생할 경우, error 컴포넌트로 이동하지 않는다.
이유 : `{children}` 와 같은 형태로 구성되기 때문에 layout의 에러를 잡을 수 없다.
해결 방법 1 : 상위 컴포넌트의 error를 사용한다.
해결 방법 2 : app의 루트 에러 처리를 담당하는 app/global-error.js를 생성하여 처리한다.

댓글 작성법

(다음과 같이 답을 작성해 댓글로 달아주세요)
<details>
<summary>정답</summary>
<div markdown="1">
정답 설명
</div>
</details>

[hyoribogo]

정답

이런 식으로 렌더링되기 때문에 레이아웃 단에서 잡힌 에러는 같은 루트의 error 컴포넌트에서 잡히지 않음.

에러를 잡고싶다면 상위의 error에서 잡거나
루트에 있는 global-error에서 잡으면 된다.

[khj0426]

정답

이동하지 않는다. 에러 바운더리가 layout안에 있기 때문에.!? global-error.tsx을 사용한다!