13-4 Layout, style, theme
레이아웃
레이아웃의 필요
- 프로젝트의 기본적인 화면 구조를 잡는다.
- 반복적으로 들어가야 하는 헤더, 푸터 등을 매 화면마다 제공한다. (반복요소 최소화, 일관성 유지)
- 상황(페이지마다의 차이)과 필요(권한 같은)에 따라 레이아웃이 변경될 수 있도록 대비한다.
글로벌 스타일 & 스타일드 컴포넌트
global style
- 프로젝트 전체에 적용 = 프로젝트에 일관된 스타일링을 적용
- "user agent stylehseet"로 표시되는 브라우저의 기본 스타일이 의도와는 다른 스타일 차이를 만든다
- 브라우저 간의 스타일 차이를 극복하기 위해 사용
에릭마이어의 reset css / normalize.css / sanitize.css
styled component css-in-js
- css 만으로는 해결할 수 없는 문제가 있기 때문
- 전역 충돌
- 스타일 의존성 관리 어려움
- 불필요한 코드(낮은 가독성), 오버라이딩
- 압축
- 상태 공유(스타일과 컴포넌트 간) 어려움
- 순서와 명시도
- 캡슐화
theme
테마의 사용
- UI, UX의 일관성 유지
- 유지보수가 용이
- 확장성
- 재사용성
- 사용자 정의
