Layout이란 UI의 배치를 의미한다.
위처럼 하나의 서비스를 만들 때 매 페이지마다 공통되는 부분이 분명 있을 것이다. 그런데 이런 부분들을 매번 만든다거나 아니면 한번 만들어 놓은 것을 import 하는 방식으로 불러오는 것은 너무 번거로울 것이다.
그렇다면 윗부분은 고정시켜버리고 아래 부분만 변경하는 것이 가장 효율적인 방법이다. 이때 고정된 부분을 레이아웃이라고 부른다.
이렇게 레이아웃을 사용하게 되면 1. 개발 시간을 단축시켜준다.
2. 유지보수가 쉽다.
는 장점이 있다.
그렇다면 전체적인 레이아웃을 모든 페이지에 어떻게 적용할 수 있을까?
바로 props
를 이용하면 된다.
props를 수동으로 넘겨줄 때는 isEdit={true}
로 직접 적어서 넘겨주고 받을 때는 props.isEdit
으로 받아올 수 있었다. 그런데 오른쪽처럼 자식 태그가 있을 때는 자동으로 props가 생겨서 props.children
으로 props를 받아올 수 있다.
이를 이용해서 기본 설정 페이지인 _app.js
에 Layout을 적용해보자.
_app.js
파일에서 기본 설정들을 넣어놓을 수 있었고 그 설정들을 바탕으로 각각의 페이지가 시작된다. 그러므로 여기에 레이아웃이라는 컴포넌트를 만들어서 그 안에 자식으로 Component
를 넣어준다면 모든 페이지에 기본적인 레이아웃을 입혀서 불러올 수 있을 것이다.
_app.js
파일을 레이아웃으로 감싸준다.레이아웃 컴포넌트에서는<Component/>
를 자식으로 가지고 있기 때문에 props.chldren
이라고 해주면 이름을 따로 명시해주지 않아도 <Component/>
를 의미하게 된다.
{props.chldren}
을 넣어준다.이렇게 _app.js
컴포넌트를 레이아웃 형태로 감싸주고 레이아웃을 꾸며주기만 하면 레이아웃은 항상 고정되어 있고 <Body/>
안에 있는 {props.children}
내용들만 변경되도록 할 수 있다.
이 때 모든 레이아웃을 한 페이지에 만드는 것 보다 Header, Banner, Navigation, Sidebar, Footer 등으로 컴포넌트를 나눠주는 것이 훨씬 보기 좋다.
ReactNode
로 준다.display : flex;
를 준다.일부 레이아웃을 숨기고 싶은 페이지가 있다면 조건부랜더링을 이용해서 숨길 수 있다. 그 방법을 알아보자.
HIDDEN_HEADERS
숨기고 싶은 페이지를 모두 적어준다. router
를 선언한다. includes
)한다. isHidden
router.asPath
를 이용해서 알 수 있다.여러개의 레이아웃을 숨기고 싶다면 이렇게 작성하면 된다.
많은 컴포넌트들에서 공통으로 쓰이는 스타일들을 한군데에 모은 것을 Global-Style이라고 한다. 우리는 Emotion 라이브러리를 사용해서 global styles를 만들어보자.
먼저 _app.js
에 Global 태그를 추가하고 styles에 globalStyles
파일을 넣어준다.
다음은 globalStyles
파일이다.
글로벌 폰트는 @font-face
로 만들어 주고 만든 이름을 똑같이 넣어준다.
(폰트 파일이나 이미지 파일 같은 경우는 public
폴더에 넣어줘야 한다.)
만약 글로벌 스타일과 다른 스타일을 주고 싶다면 그냥 추가적으로 각각 스타일을 주면 된다.
FOIT 방식 (Flash Of Invisible Text) - 폰트를 다운 받을때까지 내용 안보여줌
FOUT 방식 (Flash Of Unstyled Text) - 내용 먼저 다운받고 폰트 나중에 다운 받으면 보여주기