[React] 13장 : 리액트 라우터로 SPA 개발하기

리액트 라우터는 클라이언트 사이드에서의 라우팅을 간단하게 구현하도록 도와준다.

// 라이브러리 설치
$ yarn add react-router-dom

1. 라우터 적용

프로젝트 index.js파일에서 react-router-dom의 BrowseRouter 컴포넌트를 사용해서 렌더링 하고자 하는 APP 컴포넌트를 감싸면 된다.

해당 컴포넌트는 페이지를 새로고침 하지 않으면서 주소를 변경한다.

2. Route 컴포넌트로 주소 설정

(1) 규칙

Route 컴포넌트를 이용하면, url 경로에 따라 다른 컴포넌트를 보여줄 수 있다.
주소에 대응하는 컴포넌트를 설정하는 방법은 아래와 같다.

<Route path = {["주소 규칙1", ~ ]} component = {보여줄 컴포넌트} />

만약 홈의 주소를 '/'로 설정하고 프로필의 주소를 '/profile'로 설정한다면 '/'이 겹치기 때문에 프로필 페이지에서 홈의 내용도 보일 것이다. 따라서 홈의 주소 규칙에 exact = {true}를 추가해줘야 한다.

여기서는 예시로 Home 페이지와 About 페이지를 만들어서 연결이 잘 이루어졌는지 테스트 해보았다.

3. Link 컴포넌트로 주소 이동

(1) a태그를 사용하지 않는 이유

일반 웹 애플리케이션은 a태그를 이용해 페이지를 전환하지만, 리액트에서는 사용하면 안된다.
a태그는 페이지를 전환하면서 새롭게 페이지를 불러오기 때문에 원래 애플리케이션이 가지고 있던 상태들을 다 날려버리기 때문이다. 따라서 렌더링 된 컴포넌트들이 다시 처음부터 렌더링 되기 때문에 a태그를 사용하지 않고, Link 컴포넌트를 이용한다.

(2) Link 컴포넌트

Link 컴포넌트는 a태그로 이루어져 있지만, 페이지 전환을 방지하는 기능이 있다.

Link 컴포넌트를 사용하는 규칙은 아래와 같다.

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

4. URL 파라미터 & 쿼리

페이지 주소를 정의할때 유동적으로 설정해야 하는 경우가 발생한다.

보통 파라미터는, 특정 아이디나 이름을 사용하여 조회할때 사용하고
쿼리는 키워드를 검색하거나 페이지에 필요한 옵션을 전달하고자 할때 사용한다.

(1) URL 파라미터

프로필 페이지를 추가로 만들고 예시로 파라미터를 사용해보자.

/profile/jooyeon 형식과 같이 username을 유동적으로 넣어줄때 해당 값을 props로 받아와서 조회하는 실습을 해보면 아래와 같다.

<Profile 컴포넌트>

라우트로 사용되는 컴포넌트(여기서는 프로필 컴포넌트) 에서 받아오는 match 객체 안의 params값을 참조하여 사용자를 조회한다. match 객체 안에는 현재 컴포넌트가 어떤 경로 규칙에 의해 보이는지 정보가 들어있다.

APP 컴포넌트에서 profile 컴포넌트를 위해 라우트를 정의할때 path 규칙을 /profile/:username 이라고 넣어주면 profile 컴포넌트에서 match.params로 현재 username을 조회할 수 있다.

<App 컴포넌트>

(2) URL 쿼리

About 페이지에서 쿼리를 받아오는 예시를 진행해보자.

쿼리는 location객체에 들어있는 search값에서 조회할 수 있는데, location 객체의 형태는 아래와 같다.

EX) /about?detail=true 경로일 경우

{
  "pathname" : "/about",
  "search" : "?detail = true",
  "hash" : ""
}

location 객체는 라우트로 사용된 컴포넌트에게 props로 전달되고, 현재 주소에 대한 정보를 가지고 있다.

따라서 현재 예시에서는 About 컴포넌트에 location객체가 props로 전달될 것이다.

location객체의 search값은 문자열로 되어있기 때문에 객체 형태로 변환해주어야 한다.
쿼리 문자열을 객체로 변환하기 위해 qs 라이브러리를 사용한다.

// qs 라이브러리 설치
$ yarn add qs

아래와 같이 detail값이 참인지 거짓인지에 따라 추가 정보를 보여주는 쿼리 예시를 작성해보았다.

<About 컴포넌트>

5. 서브 라우트

라우트 안에 또 라우트를 정의하는 것이다.

username에 해당하는 프로필 링크를 따로 모아서 보여주는 Profiles 라우트 컴포넌트를 새로 만들고, 그 안에 Profile 컴포넌트를 서브 라우트로 사용하는 실습을 진행해보자.

<Profiles 컴포넌트>

JSX에서 props를 설정할 때 값을 생략하면 default로 true로 설정된다.
따라서 위에서 첫번째 Route 컴포넌트의 exact 값은 true로 설정된 것이다.

6. 리액트 라우터의 부가기능

(1) history 객체

라우트로 사용되는 컴포넌트에 match, location과 함께 전달되는 props 중 하나이다.
history 객체를 통해 컴포넌트 내의 메소드에서 라우터 API를 호출 할 수 있다.

(2) withRouter 함수

라우트로 사용된 컴포넌트가 아니더라도 match, location, history 객체에 접근 할 수 있도록 해주는 함수이다.

(3) Switch 컴포넌트

여러 Route를 감싸서 사용하는데, 감싼 Route 컴포넌트중 일치하는 단 하나의 라우트만 렌더링 시킨다.
Switch를 이용해서 모든 라우트 규칙과 일치하지 않을 때 보여주는 Not Found 같은 페이지를 구현할 수 있다.

(4) NavLink 컴포넌트

Link 컴포넌트와 유사하지만, 현재 경로와 Link의 경로가 일치할 때 특정 스타일이나 css를 적용할 수 있는 컴포넌트이다.

리액트로 규모가 큰 프로젝트를 진행하다 보면 자바스크립트의 파일이 매우 커지기 때문에 문제가 발생한다. 예를 들어 위에서 실습한 예제 중에 about 페이지에 들어갔을때 당장 필요하지 않은 profile 컴포넌트까지 모두 불러오기 때문에 비효율적이다.

라우트에 따라 필요한 컴포넌트만 렌더링 하는것이 효율적인데, 이를 도와주는 것이 코드 스플리팅이다. 이는 19장에서 배운다!