리액트를 다루는 기술 개정판 [리액트 라우터로 SPA 개발하기]

Frontend Series

heave_17 2021. 4. 22. 23:04

13. 리액트 라우터로 SPA 개발하기

- SPA (Single Page Application)란?

. 기존에는 사용자에게 보이는 화면은 서버 측에서 준비했다.

. 리액트 같은 라이브러리를 사용하는 뷰 렌더링은 사용자의 브라우저가 화면 준비를 담당한다.

. 인터랙션이 발생하면 필요한 부분만 자바스크립트를 사용하여 업데이트한다. (서버 API로 필요한 데이터만 새로 불러옴)

. 라우팅(다른 주소에 다른 화면을 보여주는 것): react-router, reach-router, Next.js 등

- SPA의 단점

. 앱의 규모가 커지면 자바스크립트 파일이 너무 커진다.

. 그러나, 코드 스플리팅을 사용하면 라우트 별로 파일들을 나누어서 트래픽과 로딩 속도를 개선할 수 있다.

. 자바스크립트를 수행하지 않는 일반 크롤러의 검색 결과가 페이지에 잘 나타나지 않을 수 있다. -> 서버사이드 렌더링으로 해결

- 프로젝트 준비 및 기본적인 사용법

. 프로젝트 생성 및 라우터 적용 > 페이지 만들기 > Route 컴포넌트로 특정 주소에 컴포넌트 연결 > 라우트 이동하기

> URL 파라미터와 쿼리 이해하기 > 서브 라우트 > 부가 기능 알아보기

. react-router-dom 라이브러리를 설치한다.

$ yarn create react-app router-tutorial
$ cd router-tutorial
$ yarn add react-router-dom

- Route 컴포넌트로 특정 주소에 컴포넌트 연결

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

. 규칙은 모든 component에 동일하게 적용된다.

. 개별 적용하려면 Route component 사용시 exact=true로 설정해야 한다.

- Link 컴포넌트를 사용하여 다른 주소로 이동하기

. 일반 웹 애플리케이션에서는 a 태그를 사용하여 페이지를 전환하지만, 리액트에서는 사용하면 안 된다.

. a 태그는 페이지 전환 과정에서 새로운 페이지를 불러오기 때문에 기존 상태들을 모두 날려 버린다. (전체 재 렌더링)

. Linke 컴포넌트는 App을 유지한 상태에서 HTML5 History API를 사용하여 페이지의 주소만 변경해준다.

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

- Route 하나에 여러 개의 path 설정하기

. path props를 배열로 설정해 주면 여러 경로에서 같은 컴포넌트를 보여 줄 수 있다.

- URL 파라미터와 쿼리

. 페이지 주소를 정의할 때 유동적인 값을 전달해야 할때, 파라미터와 쿼리를 이용할 수 있다.

파라미터 예) /profile/velopert

쿼리 예) /about?details=trued

. URL 쿼리: location 객체에 들어 있는 search 값에서 쿼리를 조회할 수 있다. location 객체는 컴포넌트에게 props로 전달됨

- 서브 라우트

. 라우트 내부에 또 라우트를 정의하는 것

- 리액트 라우터 부가 기능

. history: 컴포넌트 내에 구현하는 메서드에서 라우터 API를 호출할 수 있다.

. 예) 뒤로 가거나, 로그인 후 화면을 전환하거나, 다른 페이지로 이탈하는 것을 방지할 때 사용

. withRouter: Higher-order Component (라우트로 사용된 컴포넌트가 아니어도 match, location, history 객체에 접근 가능)

. Switch: 여러 Route를 감싸서 그중 일치하는 단 하나의 라우트만을 렌더링시켜 준다. (Not Found도 구현 가능)

. NavLink: 현재 경로와 Link에서 사용하는 경로가 일치하는 경우 특정 스타일 혹은 CSS 클래스를 적용할 수 있는 컴포넌트