1.Routing
라우팅 이란 Route(경로)라는 의미에서 파생된 경로를 찾는 행위, Router는 Routing을 해주는 도구 라고 할 수 있다.
웹프론트엔드에서 Routing은 다른 경로(url 주소)에 따라 다른 View(화면)를 보여주는 것을 의미한다.
쉽게 말해, 한 웹페이지에서 URL만 바꿔가며 다른 화면을 볼 수 있다.
2. 설치방법
라우팅을 하기 위해 react-router-dom이라는 라이브러리를 설치한다.
$ npm install react-router-dom
설치가 완료 되면 아래와 같은 경로에 잘 추가 되었는지 확인하면 된다.
3. Router 컴포넌트
1) Router 컴포넌트를 만드는 이유
CRA(Create-React-APP)을 통해 프로젝트를 만들고 npm start를 터미널에 입력하면, 최초 화면에서 APP컴포넌트의 내용을 볼 수 있다. 하지만 URL을 아무리 변경해도 같은 화면만 보이게 된다.
그 이유는 라우팅 기능을 구현하기 위해서는 Router 컴포넌트가 필요하기 때문이다.
2) Router.js의 파일 위치
위와 같이 src폴더 안 index.js와 같은 위치에 생성하면 된다.
3) Router 컴포넌트 구현
Router 컴포넌트를 구현하기 위해서는 BrowserRouter, Routes, Route 컴포넌트를 import 해야 한다.
방식은 아래와 같이 BrowserRouter, Routes, Route를 부모와 자식 요소로 구분하듯이 작성해주면 된다.
BrowserRouter는 주소 변경에 대해 다양한 편의 기능을 제공해 주는 컴포넌트이다. 대표적 기능으로는 페이지가 새로고침 되지 않아도 주소 변경이 가능하게 하는 기능이 있다.
Routes 컴포넌트는 여러 Route를 감싸서 그 중 규칙이 일치하는 라우트 단 하나만을 렌더링 시켜주는 역할을 한다.
Route 컴포넌트는 규칙을 설정할 수 있는 컴포넌트이다. 여러 Route를 감싸서 그중 규칙이 일치하는 라우트 단하나만을 렌더링 시켜준다. 만약 경로에 상관없이 보여주고 싶은 컴포넌트가 있다면 Routes 컴포넌트 밖에 위치시켜주면 된다. 결과적으로 Nav와 Footer컴포넌트는 특정 경로에 따라 보여지는 것이 아니라 항상 같은 위치 화면에 보여지게 된다.
4.Link 컴포넌트 사용
위와 같은 방식으로 <Link>를 걸어주기만 하면 된다.
a태그와 유사하지만 a태그를 사용 할 경우 새로운 페이지를 요청해서 받아 오기 때문에 몇가지만 바꿔도 매번 전체 화면을 렌더링 하기 때문에 비효율적이다.
