레이아웃

📌 레이아웃

레이아웃은 프로젝트 전체의 UI 구조를 의미

Header, Navigation, Menu, Footer, Main 등으로 화면을 쪼개 하나의 컴포넌트에 조립시켜 보여주는 것

📌 구성

화면 구성을 위해 Header, Navigation, Banner, Body, Footer 로 나누어놓은 컴포넌트와

쪼개 놓은 컴포넌트를 하나로 조립하는 index 파일로 나누어져 있다.

쪼개놓은 컴포넌트를 import 시켜 사용하며, 기존과 동일하게 사용되는걸 확인할 수 있다.

❗️ index 파일 내부를 보면 props.children 이 있는데, 이 부분이 주소에 따라 다르게 들어가는 내부 내용이다.

만약 http://localhost:3000/boardDetail 로 접속을 한다면, {props.children} 자리에 boardDetail의 container 가 들어가는 것이다.

이 개념에 대해서 조금 더 이해하기 위해서는 작동 방식을 알아야 하는데, 어느 주소로 접속을 하던 가장 먼저 실행되는 파일이 _app.tsx 다

_app.tsx 의 구조를 보면, 위에서 만든 Layout 또한 import 되어 해당 프로젝트의 어느 주소를 실행 시키든 Layout 의 컴포넌트들이 모든 페이지에서 붙어 나오게 되는것이다.

Layout 내부에 Component, {...pageProps} 가 있는데 태그 내부의 자식들은 따로 명시하지 않아도 자동으로 children 이란 이름으로 props로 넘어간다.

_app.tsx 에서 Layout 으로 props 를 전달해주면, 최종적으로 바디영역 전체 Layout 이 children 이 되며 각각의 모든 페이지는 바디영역에 보여지게 된다.