Layouts

layouts
React 모델을 사용하면 페이지를 일련의 구성 요소로 분해할 수 있다.
이러한 구성 요소 중 많은 부분이 페이지 간에 재사용 되는 경우가 많다.
예를 들어 모든 페이지에 동일한 navigation bar와 footer과 바닥 글이 있을 수 있다.
Next.js는 여러 페이지에서 동일한 layout을 사용할 수 있도록 component를 구성하는 기능을 제공한다.
index, footer 등등 여러 페이지에서 동일하게 나타내는 화면 값일 때 이 layout을 사용하여 구성한다면 매 page마다 작성하지 않을 수 있어 매우 편리하다.
Next.js에서 레이아웃이란, 페이지의 포장지와 같기 때문이다. 이론적으로 중첩된 레이아웃도 있을 수 있다. 하위 페이지에 특화된 레이아웃을 적용하는 것이다.
root 레이아웃에 중첩되는 것이다. 따라서 root 레이아웃이 항상 활성화되는 것이다.

사용 방법

간단하게 layout component를 생성하고 생성한 component를 상위 component로 적용할 component들을 감싸주면 된다.
사용할 layout의 component로 최상위 component를 감싸주면 다른 component에서는 코드를 작성하지 않아도 동일하게 적용되는 것을 확인할 수 있다.