[리액트 따라하며 배우기] 사이드바 프로젝트 React+typescript, styled-components,react-router-dom

깃허브 레파지토리 : https://github.com/jdy0120/frontendproject/tree/master/sidebar

GitHub - jdy0120/frontendproject

 

이번 리따배 프로젝트는 간단한 사이드바를 만들어보는 프로젝트입니다.

 

위 프로젝트는 react에서 child를 사용하여 여러 컴포넌트에서 공통적으로 사용하는 기능들을 하나의 컴포넌트로 만들어 코드 반복을 줄입니다.

 

Sidbar.tsx라는 컴포넌트를 만들어 home,portfolio,info,etc라는 각각의 컴포넌트에 재사용합니다.

 

 

spa에서 여러 페이지를 구현할 수 있도록 도와주는 react-router-dom을 사용합니다.

컴포넌트를 기준으로 여러페이지를 만듭니다.

 

BrowserRouter,Routes,Route는 react-router-dom라이브러리에서 import한 값입니다.

 

최종적으로 다음과 같은 화면이 만들어졌고

현재 페이지에 맞는 사이드바 요소에 이펙트를 줘 사이드바를 보기 쉽게 css를 추가했습니다.

 

예를들어 '/'인경우 Home 메뉴가 커지고

'/portfolio'인 경우 Portfolio메뉴가 커지는 효과가 있습니다.

 

아래 영상을 따라하시면 간단히 사이드바를 구현할 수 있습니다.

 

 

1편

2편