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