이번 포스팅 주제는 리액트 라우터(React Router) 사용법입니다. 라우터에 대해서 설명하기 전에 글의 이해를 돕고자 몇 가지 간단한 설명을 하고자합니다.
글의 순서는
1. 싱글페이지
2. 라우팅
3. 리액트 라우터 설치 및 사용방법
위의 순서대로 진행하겠습니다.

먼저 싱글페이지와 라우팅에 대해 간단하게 설명하겠습니다.

싱글 페이지 어플리케이션(SPA)

리액트는 싱글 페이지 어플리케이션(Single Page Application) 으로 처음에 모든 정적인 소스를 모두 불러오고 나중에 라우팅을 통해 필요한 컴포넌트를 동적으로 불러옵니다.

라우팅

라우팅은 유저가 특정 url을 방문했을 때 해당 url에 맞는 페이지를 보여주는 것을 말합니다. 주로 리액트 같은 싱글 페이지 어플리케이션(Single Page Application)에서 사용이 됩니다.

간단하게 싱글 페이지 어플리케이션과 라우팅에 대해서 설명해보았고, 이제 리액트 라우팅 중에서 제일 많이 쓰이는 리액트 라우터에 대해서 설명하겠습니다.

리액트 라우터(React Router) 사용법

1. 리액트 라우터 설치

먼저 터미널에서 리액트 라우터를 설치해줍니다.

npm add react-router-dom

2. 프로젝트에 라우터 적용

src/index.js 파일에서 react-router-dom에 내장되어 있는 BrowserRouter라는 컴포넌트를 사용합니다.

3. 페이지 만들기

src에 가서 Home.js와 About.js를 만들어줍니다.

Home.js

About.js

이제 Route 컴포넌트로 특정 주소에 컴포넌트를 연결해 봅시다.

4. Route로 특정 주소에 컴포넌트를 연결

라우트 컴포넌트는 이렇게 사용합니다.

<Route path="주소" Component={해당 컴포넌트} />

App.js로 가서 기존 코드를 제거하고 방금 만든 Home와 About 컴포넌트를 보여주도록 설정합니다. 여기서 exact={ture}는 컴포넌트가 하나만 잘 나타나게 해주는 코드입니다.

5. Link를 사용하여 다른 주소로 이동

마지막으로 Link 컴포넌트를 사용하여 다른 주소로 이동해 봅시다.

<Link to="주소">내용</Link>

기본적인 구성을 이렇게 됩니다.
이제 다시 App.js로 가서

이렇게 코드를 작성해줍니다.

App.js 전체 코드를 보면

이렇게 작성이 되었습니다. 이제 터미널로 가서 npm start를 한 후 나온 페이지를 확인합니다.

이렇게 버튼을 눌렀을 때 해당 페이지로 잘 이동이 되면 성공입니다.