props.children

레이아웃이란 프로젝트 전체의 UI 구조를 의미한다.

쉽게 말하면, Header, Navigation, Menu, Footer, Main 등으로 화면을 쪼개는 일을 의미한다.

아래는 레이아웃 컴포넌트의 폴더 구조의 예시이다.

(index.tsx 파일은 각각의 컴포넌트를 하나로 조립함)

index.tsx

props.children

props를 전달하는 방법에는 2가지가 있다. (수동 / 자동)

//수동
<BoardWrite isEdit={true} />

여태까지 봤던 props 전달 방식이다. 이름까지 따로 지정해서 전달해준다.

<BoardWrite>
  <div>TEST</div> //자동(props.children)
</BoardWrite>

위 처럼 작성하게 되면, BoardWrite에 전달되는 props.children은 div태그를 가리키게 됨.

이를 활용해서, 레이아웃 구조를 생각할 수 있다.

index.tsx

_app.tsx

실행결과

최종 조립된 레이아웃이 _app.tsx에 들어가게 되고, 해당 레이아웃은 불러올 페이지의 Component 태그를 감싸고 있기 때문에 어떤 페이지를 열어도 이 레이아웃이 기본 세팅된다.

레이아웃 Hidden 영역 설정하기

위 처럼, _app.tsx에 레이아웃을 고정시켜버리면 모든 페이지에서 해당 레이아웃 안에 있는 모든 컴포넌트가 반영된다.

만약, 특정 페이지에서는 헤더 컴포넌트를 숨기고 싶다면 다음과 같이 설정할 수 있다.

우선, 숨길 페이지를 HIDDEN_HEADERS 배열에 담아준다.
그 다음으로 사용자가 접속한 페이지 주소를 알아야 하기 때문에 Router를 생성한다.
router.asPath를 활용하면 접속한 페이지 주소를 알아낼 수 있다.

만약, HIDDEN_HEADERS 배열에 router.asPath가 존재한다면 조건부렌더링을 통해 헤더 컴포넌트를 제외하고 렌더링한다.

현재는 배열의 메서드 includes()를 사용해서 해결이 가능하지만, 나중에 더 복잡한 경로로 인해 해결이 안 될 경우에는 적절한 알고리즘 메서드를 사용하여 로직을 구성해주어야 할 것 같다.