React Router는 React 애플리케이션에서 페이지 전환(라우팅)을 구현하기 위한 대표적인 라이브러리이다.
단일 페이지 애플리케이션(SPA, Single Page Application) 구조를 유지하면서도 마치 여러 개의 페이지가 있는 것처럼 URL에 따라 다른 화면을 보여줄 수 있게 해주는 도구이다.
📌 왜 Router를 사용하는가?
<a href="...">HTML에서 a태그를 클릭하면 전체 페이지가 새로고침되며 새로운 HTML 문서를 서버로부터 불러온다.
하지만 React는 SPA 구조이므로 한 번 로딩된 HTML 내에서 JavaScript로 화면만 동적으로 바꾸는 방식을 사용한다.
그래서 개발자 도구를 연 상태에서 컴포넌트를 눌러보면 매번 새롭게 네트워크를 타는 a태그와 다르게 네트워크에 아무런 변화가 없는 것을 확인할 수 있다.
React 자체에는 라우팅 기능이 내장되어 있지 않기 때문에, URL 경로에 따라 다른 컴포넌트를 보여주고 싶다면 외부 라우팅 라이브러리가 필요하며, 그 중 가장 널리 쓰이는 것이 React Router이다.
npm install react-router-dom
위 명령어로 라우팅을 사용할 앱 내에서 설치해준다.
📌 구성 요소 설명
BrowserRouter
라우팅을 감싸는 최상위 컴포넌트로, 브라우저의 주소(URL) 변화를 감지하고 적절한 컴포넌트를 렌더링한다.
index.js내부에 import해서 사용한다.
Routes
라우터 경로들을 그룹으로 묶는 컨테이너이다.
Route
경로별로 렌더링할 컴포넌트를 지정한다. path는 URL 경로, element는 보여줄 컴포넌트를 의미한다.
Link
HTML의 a 태그를 대체하며, 페이지 전체를 새로고침하지 않고 경로만 변경해준다. 즉, SPA 구조를 유지하면서 페이지 이동을 구현할 수 있다.
즉, Link를 누르면 Link의 to 와 Route의 path 속성이 같은 Route가 보이게 되고 어떤 내용이 보일지는 개발자가 element에 컴포넌트를 정하면 된다.
위의 내용을 이용해서 도서 목록을 출력하는 과제를 수행했다.
데이터는 API가 아직 없어서 App.js에 전역적으로 정의해주었다.
홈 화면에는 제목과 홈으로 갈 수 있는 Link와 전체 도서를 출력할 수 있는 Link를 정의하고,
각 Link를 누르면 띄울 Route를 정의했다.
이때 책 목록의 id값을 누르면 그 자리에 띄울 도서 한 권의 detail 정보를 띄우는 Route도 정의했다.
<Route path="/bookDetail/:id" ...Route의 path에 :를 사용하면 아래와 같이 Link에서 전달한 파라미터를 해당 이름으로 받을 수 있다.
나의 코드상에서는 도서 목록 중 하나의 책을 선택하면 해당 도서의 id값이 id라는 이름으로 전달된다. 전역데이터의 id가 1,2,3... 이런식이니까 /bookDetail/1, /bookDetail/2, /bookDetail/3... 이런식으로 넘어가게 되어 이 id를 이용해 특정 도서에 대한 정보를 추출할 수 있게 되는 것이다.
여기서 살짝 헷갈릴 수 있는 부분은 Link가 Book 컴포넌트에 정의되어있는데 Route가 App에 정의되어 있다는 것이다.
이는 두 역할이 다르기 때문인데..
Link는
사용자가 클릭할 수 있는 링크 버튼/메뉴를 만들어준다.
말 그대로 "어디로 이동할지" 알려주는 역할이다.
따라서 Link는 자유롭게 컴포넌트 내부에서 작성하는 것이 자연스럽다.
반면, Route는
현재 주소(URL)에 따라 어떤 컴포넌트를 보여줄지 결정하는 "경로와 컴포넌트 매핑" 역할이다. 즉, 어디를 보여줄지 결정하는 로직인 것이다.
라우팅은 전역적으로 처리되어야 하기 때문에 보통 App.js 혹은 Router.js처럼 앱의 중심이 되는 상위 컴포넌트에서 Route들을 한 번에 정의한다.
이렇게 하면 모든 페이지 경로를 한 눈에 관리할 수 있다는 장점이 있다.
자 이제 이렇게 작성한 코드에 적당한 css까지 입혀주면 아래와같은 화면을 만들어줄 수 있다.
<홈>
<도서 목록>
<도서 상세>
