Overview

여러 기능을 하나로 페이지로 구성한 앱을 SPA라고 함

일반 웹앱에서는 페이지 이동 시마다 서버에 새로운 페이지를 요청, 이를 통해 주소(URL)이 바뀌고, 브라우저가 전체 페이지를 새로 렌더링

이력이 남아서 뒤로 가기 등 가능

image.png

하지만 SPA 세계에서는 페이지 전환도 앱의 책임 초기 로딩을 한 번만 하고, 이후는 JavaScript로 동적으로 내용만 바꿈, 브라우저 주소는 바뀌지만, 서버에 새 페이지를 요청하지 않음 → 이력을 남기려면 브라우저 히스토리도 직접 조작해야 함

이러한 페이지 전환 매커니즘을 앱에서 구현하는 것은 번거로워, 이를 해결하고자 리액트에서 자주 사용되는 라이브러리가 바로 리액트 라우터

리액트 라우터의 기본

라우터라우팅 기능을 제공하는 라이브러리를 말함

라우팅은 클라이언트가 요청한 URL에 따라 처리를 전달할 대상(컴포넌트)을 결정하는 것 또는 그 구조를 말함

image.png

리액트 라우터는 미리 준비해둔 라우팅 정보(라우팅 테이블)를 기반으로 해당 컴포넌트를 호출, 처리 결과를 페이지에 반영하는 역할까지 담당

라우팅 시 브라우저의 히스토리도 관리해주기에 SPA앱을 일반 웹앱처럼 이용할 수 있다는 장점이 존재

라우팅 테이블 정의

라우터를 이용하기 위해서는 먼저 라우팅 설정, 즉 **‘어떤 URL에 어떤 컴포넌트를 연결할 것인지’**를 정의해야 함 라우팅 설정은 **main.jsx**에 직접 작성해도 되지만, 해당 책에서는 **routesXxxxx.jsx**로 잘라내어 설명

라우터에 의해 제어되는 페이지라는 의미에서 페이지 컴포넌트라고 부르기도 함