본문 바로가기
Font-end/React

[React] Layout을 구성해보자

by 허도치 2020. 7. 26.
서론

  블로그나 쇼핑몰 등 기본적인 웹사이트를 구성할 때 Header, Section, Footer, SideBar와 같은 기본요소를 가지게 된다. 메뉴를 클릭하여 페이지가 변경되면 Header, Footer, SideBar는 항상 같은 내용을 유지하며, Section의 내용만 변경되게 된다. 이번 포스트에서는 React를 이용하여 기본요소를 가지며, Section만 변경되도록 Layout을 구성해볼 계획이다.

 

 

 

1. 프로젝트 구성
1-1. 프로젝트 생성

npx create-react-app react-layout-app

 

1-2. package 설치

npm install --save react-router-app styled-components

 

1-3. 폴더 구성

 

2. App 구현

 

 

3. Layout 구현

3-1. Main

 

3-2. Main/Header

 

3-3. Main/Section

 

3-4. Main/Footer

 

3-5. Main/SideBar

 

3-6. Main/SideBar/SideBarNav

 

3-7. Main/SideBar/SideBarNavItem

 

 

 

4. Routes
4-1. routes/Home

 

4-2. routes/Board

 

4-3. routes/Product

 

4-4. routes/NotFoundPage

 

 

 

 

 

 

 

 

댓글