레이아웃은 왜 필요할까?
-
화면 구조의 기준
프로젝트 전반에 걸쳐 공통 레이아웃(header, sidebar, footer)을 한 곳에서 정의해 두면, 새로운 페이지를 만들 때 매번 똑같은 마크업을 반복할 필요가 없습니다. -
UI 재사용성 & 유지보수
헤더나 푸터처럼 모든 화면에 반복해서 들어가는 컴포넌트를 Layout에서 관리하면, 수정이 필요할 때 Layout만 고치면 전체 페이지에 반영됩니다. -
확장성 대비
프로젝트가 커지면, ‘관리자용 레이아웃’·‘사용자용 레이아웃’ 등으로 분기할 수 있어 유연하게 대처할 수 있습니다.
Footer에 Pico.css 적용 (CDN 예시)
public/index.html 헤드 태그에 간단히 추가:Usage from CDN#
Alternatively, you can use jsDelivr CDN to linkpico.min.css.<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css"
components/layout/Layout.tsx 에 공통 헤더·사이드바·푸터가 감싸진 기본 틀을 만들고,
App.tsx 에서 형태로 페이지(UI)들을 이 Layout 안에 렌더링하였다.
children 컴포넌트 타입 비교
- ReactNode
모든 렌더링 가능한 값의 총집합. string, number, ReactElement, Fragment, boolean 등 거의 모든 걸 포함합니다.- ReactElement
React.createElement(type, props, children) 로 생성된 객체. 타입이 명확한 “실제 컴포넌트 인스턴스”를 가리킵니다.- JSX.Element
TSX/JSX 문법으로 생성된 ReactElement 의 타입 별칭(alias). 즉, 같은 표현식의 결과 타입입니다.
global style
- 프로젝트 전체에 일관된 reset/CSS 기본값을 한 번에 적용합니다.
- 브라우저 기본 스타일(user agent stylesheet) 차이를 제거해 크로스-브라우징 이슈를 줄여 줍니다.
- styled-components의 createGlobalStyle로 작성하면,
<ThemeProvider>내부에서 바로 렌더링만 해 주면 됩니다.
대표적인 3가지
- 에릭 마이어의 reset.css
모든 브라우저 기본 스타일을 싹 비워 완전 초기화 - normalize.css
유용한 기본 스타일은 살리고, 브라우저별 버그·차이만 교정 - sanitize.css
reset + normalize 장점을 합쳐 현대적 환경에 최적화
css-in-js는 왜 필요할까
- 전역 충돌
- 의존성 관리 어려움
- 불필요한 코드, 오버라이딩
- 압축
- 상태 공유 어려움
- 순서와 명시도
- 캡슐화 -> 제일 중요한 이유
그래서 최근 많이 사용되는 style components를 사용할 예쩡이다.
최근 제일 많이 사용되는 스타일 컴포넌트
테마
- UI, UX의 일관성 유지
- 유지보수가 용이
- 확장성
- 재사용성
- 사용자 정의
styled-components theme구성
Theme Swicher with Context API
- 사용자는 토글 UI를 통해 웹사이트의 색상 테마를 바꿀 수 있다.
- 색상 테마는 전역상태로 존재한다.
- 사용자가 선택한 테마는 로컬스토리지에 저장된다.
그걸 위해서 테마를 만들고
// src/style/theme.ts
export type ThemeName = 'light' | 'dark'
export interface Theme {
name: ThemeName
color: {
primary: string
background: string
secondary: string
third: string
}
}
export const light: Theme = {
name: 'light',
color: {
primary: 'brown',
background: 'lightgray',
secondary: 'blue',
third: 'green',
},
}
export const dark: Theme = {
name: 'dark',
color: {
primary: 'coral',
background: 'midnightblue',
secondary: 'darkblue',
third: 'darkgreen',
},
}
export function getTheme(name: ThemeName): Theme {
return name === 'light' ? light : dark
}이걸 통해 테마 스워처(context API)를 만들어 적용하였다.
