레이아웃(Layout)
프로젝트 전체의 UI 구조를 의미한다.
즉, Header, Navigation, Menu, Footer, Body 등으로 화면을 분할하는 일을 의미한다.
레이아웃만 잘 잡아도 프로젝트 전체의 유지보수가 쉬워진다. 현재까지 작성했던 각각의 개별 페이지들은 레이아웃의 Body 부분에 모두 넣어주고, 메뉴 등을 클릭하면 Body의 내용만 바꿔주면 깔끔한 구조를 유지할 수 있다.
'props.children'은 우리가 정의를 해준것이 아니라 자동으로 'children'이란 이름으로 props를 받아온 것이다.
헤더영역에는 주황색, 배너부분은 빨강색, 내비게이션 영역엔 하늘색, 사이드바 영역엔 파랑색을 주었다. 이렇게 설정하면 다른 페이지로 이동을 하여도 항상 같은 레이아웃을 유지할 수 있게 된다.
하지만, 특정 페이지에 특정 레이아웃을 보이지 않게 하는 경우가 있을 수 있다. 예를들어 헤더영역에 로그인창이 있었는데 로그인창으로 이동하였을 경우에는 보이지 않게하는 경우가 그럴 때이다.
이럴때는 특정 페이지에서는 레이아웃을 나타내지 않게 하는 조건을 걸어주면 된다.
이런식으로 사용하게 된다면 "/12-07"페이지와 "/12-09"페이지는 헤더 영역이 보이지 않게 된다.
글로벌 스타일
글로벌 스타일이란 우리가 만들고있는 모든 컴포넌트에 기본적으로 적용시켜주는 스타일을 의미한다.
기본값으로 font-size: 16px; 혹은 margin: 0px;, box-sizing: border-box; 이런식의 설정을 기본값으로 주어주고자 할때 사용한다.
app.tsx 파일에서 @emotion/react로부터 Global을 import시켜 태그로 사용하고, 속성값으로 styles를 넣어주면 된다.
그 다음 @emotion/react로부터 css를 import하여 스타일을 작성해주고, globalstyles를 위의<Global styles={ } /> 안에 넣어주면 css안에 넣어놨던 속성들이 글로벌 스타일로 적용이 완료된다.
