리액트 라우터 설치하기
npm i react-router-dom
react-router-dom을 설치하는 이유는 리액트 라우터 개발팀이 react-router를 핵심 코드로 하여, 웹용(react-router-dom)과 모바일 애플리케이션용(react-router-native)을 함께 릴리즈 하기 때문이다.
- 설치 후 package.json을 열어 설치된 react-router-dom의 버전 확인하기
프로젝트에 라우터 적용하기
리액트 라우터가 제공하는 BrowserRouter 컴포넌트로 App을 감싸면 된다.
index.js에서 다음과 같이 작성한다.
line 5. import { BrowserRouter } from 'react-router-dom';
: 설치한 react-router-dom 라이브러리에서 BrowserRouter 컴포넌트를 불러온다.
line 9. BrowserRouter를 App의 부모 컴포넌트로 설정한다.
-> BroswerRouter에는 브라우저의 주소 변경을 감지하는 기능이 있다. 이 라우터는 컴포넌트가 페이지를 구성하고 이동하는데 필요한 기능을 다양하게 제공한다.
페이지 컴포넌트 만들기
여러 페이지로 구성된 리액트 앱을 리액트 라우터로 만든다.
그 전에 페이지역할을 담당할 컴포넌트를 만들어야 한다.
- Home: 인덱스 페이지
- New: 새 일기 작성 페이지
- Diary: 일기 상세 조회 페이지
- Edit: 작성한 일기를 수정하거나 삭제하는 페이지
페이지 역할을 담당할 컴포넌트는 별도의 폴더로 분리한다.
src 아래에 pages 폴더를 생성한다.
페이지 라우팅 구현하기
총 4개의 페이지 컴포넌트를 만들었다.
이제 URL 경로에 따라 브라우저에 적절한 페이지를 렌더링하도록 페이지 라우팅을 구현한다.
react-router-dom이 제공하는 routes와 route 컴포넌트를 이용하면 간단하게 구현할 수 있다.
앞에서 작성한 App.js 에서 감정 이미지를 불러오는 코드를 모두 삭제하고 다음과 같이 작성한다.
line 1. import { Routes, Route } from 'react-router-dom';
: react-router-dom 라이브러리에서 Routes와 Route 컴포넌트를 불러온다.
line 3~6. import 폴더 from "폴더경로";
: 페이지 역할을 담당할 4개의 컴포넌트를 불러온다.
line 13. <Routes></Route>
: Routes는 여러 route 컴포넌트를 감싼다. 그리고 현재 URL 경로에 맞게 적절한 Route 컴포넌트를 페이지에 렌더링한다.
line 14~17. <route path="경로" element={<폴더명 />} />
: 모두 4개의 페이지를 위한 Route 컴포넌트를 작성한다.
Routes문은 자바스크립트의 switch문과 유사하다.
Routes를 switch, Route를 case로 생각하면 이해하기 쉽다.
Routes는 자신이 감싸는 Route 컴포넌트 중에서 브라우저 주소 표시줄에 입력된 URL 경로와 일치하는 요소를 찾아 페이지에 렌더링한다.
페이지 이동 구현하기
: html에서는 <a>태그를 이용해 페이지를 이동했는데, 리액트 라우터로 페이지 라우팅을 구현하는 앱에서는 Link라는 컴포넌트를 이용한다.
<Link to = '이동할 경로'>링크 이름</Link>
Link 컴포넌트는 to 속성에 경로를 지정해 페이지를 이동한다.
클라이언트 사이드 렌더링은 페이지를 서버에 요청하지 않고 브라우저가 직접 이동시킨다.
📌 a태그로도 페이지를 이동시킬 수 있다. 그러나 a태그를 이용하면 브라우저는 현재 페이지를 지우고 새로운 페이지를 불러오는 방식으로 이동한다. 클라이언트 사이드 렌더링 방식으로 이동하는게 아니다. 따라서 페이지의 일부만 교체해 빠르게 이동하는 리액트 앱의 장점을 활용할 수 없다.
App.js 에서 Link 컴포넌트를 이용해 페이지를 이동하도록 링크를 추가한다.
line 1. Link를 추가한다.
line 19~24. 링크 컴포넌트를 사용하여 이동할 경로 추가
구현된 모습
