[리액트] Layout

대부분의 페이지 구성

일반적인 페이지는 Header, Menu(Option), SideBar(Option), Content, Footer 등으로 구성됨.

🧱 리액트 레이아웃이란?

리액트에서 "레이아웃"이란, 화면의 뼈대 구조를 컴포넌트로 만들고, 반복되는 UI를 효율적으로 재사용하는 방식을 말해요.
일종의 “공통 틀”을 만들고, 그 틀 안에서 페이지들을 꾸며가는 개념입니다.

React Layout 구성하기

1. Header 컴포넌트 생성

2. Footer 컴포넌트 생성

3. Sidebar 컴포넌트 생성

4. 페이지 컴포넌트 생성

5. 각각의 컴포넌트를 Layout 컴포넌트를 생성하여 조합하기
   

✅ 리액트 레이아웃을 왜 쓰는가?

이유	설명
🔁 중복 제거	매번 Header, Footer를 페이지마다 복붙하는 비효율 줄임
🧩 구조 분리	재사용 가능한 틀(템플릿)과 내용 분리
🛠️ 유지보수 편함	하나의 레이아웃 파일에서 전체 구조 관리
📱 반응형 대응 용이	레이아웃에 맞춰 CSS 관리도 쉬움