리액트 React Router
React Router 라이브러리 설치
https://reactrouter.com/en/main
Home v6.20.1
I'm on v5 The migration guide will help you migrate incrementally and keep shipping along the way. Or, do it all in one yolo commit! Either way, we've got you covered to start using the new features right away.
reactrouter.com
리액트 라우터 공식 사이트이다
npm install react-router-dom위의 명령어를 통해 리액트 라우터를 설치한다
package.json을 확인해 보면 설치가 잘 됐음을 확인할 수 있다.
BrowserRouter 컴포넌트는 react-router-dom 라이브러리에서 제공하는 컴포넌트인데, 브라우저의 현재주소를 저장하고 감지하는 역할을 한다.
main.js로 이동해서 BrowserRouter를 불러온 뒤, App 컴포넌트를 감싸준다.
이제부터 App컴포넌트의 모든 자식 컴포넌트들이 전부 현재 브라우저의 주소를 불러와서 이용할 수도 있고, 어떻게 주소가 변경되었는지 감지할 수도 있게 된다.
BrowserRouter 컴포넌트가 전체 모든 컴포넌트를 감싸고 있는 root 컴포넌트로 설정된 것을 확인할 수 있다.
BrowserRouter 컴포넌트가 가지고 있는 모든 경로와 관련된 데이터들은 Navigation.Provider 또는 Location.Provider 같은 context객체의 Provider 컴포넌트를 이용해서 App 모든 자식 컴포넌트에게 공급하는 것을 볼 수 있다.
정리: BrowserRouter 컴포넌트를 통해 App 컴포넌트를 감싸게 되면 이제는 리액트앱의 모든 컴포넌트에서 페이지 라우팅과 관련된 모든 데이터를 손쉽게 공급받아서 사용할 수 있게 된다.
이렇게 리액트 Route를 사용할 준비는 다 됐다.
React Router 사용
- 경로에 따라 다른 페이지 렌더링
경로에 따라 다르게 띄울 임시 컴포넌트(페이지)들을 생성한다.
App 컴포넌트에서 위에서 만든 페이지들을 불러온다.
1. App 컴포넌트에서 Routes, Route를 react-router-dom으로부터 불러온다.
2. App 컴포넌트의 최상위 태그를 Routes로 감싸준다.
3. Route 컴포넌트를 이용해서 경로와 리액트 컴포넌트를 매핑시켜 주면 된다.
- path에는 경로를, element에는 연결할 컴포넌트를 입력하면 된다.
현재 경로가 localhost/search면 Routes 컴포넌트는 Route 컴포넌트들 중에 path가 '/search'인 컴포넌트를 찾아서, 해당 컴포넌트에 element prop으로 전달된 <search/>를 렌더링 하게 된다.
/일 때는 <Home/> 컴포넌트가 렌더링 되고, /search일 때는 <search/> 컴포넌트가 렌더링 되는 것을 확인할 수 있다.
- 존재하지 않는 경로에 대한 경고를 띄우는 법
경고로 띄울 컴포넌트(페이지)를 생성한다.
그리고 App컴포넌트에서 Route를 하나 추가하면 된다. 단 경로를 path='*'로 설정한다. 이는 모든 페이지에 적용한다는 의미이다.
즉 위에서부터 내려오면서 해당하는 경로가 없을 때, 남은 모든 경로에 경고 페이지를 띄울 수 있게 하는 것이다.
없는 경로로 이동했을 때 경고페이지가 잘 렌더링 되는 것을 확인할 수 있다.
- 페이지 이동(navigating 구현)
나눠진 페이지들을 자유롭게 이동하는 기능이다.
App컴포넌트에서, 최상위 태그를 빈 태그로 감싸고 <div> 태그를 하나 생성한다.
그리고 react-router-dom으로부터 Link 컴포넌트를 import 해준다.
Link 컴포넌트는 기존의 HTML에 존재하는 <a>를 대체하는 컴포넌트이다. Link 컴포넌트를 이용하면 이제 react-route-dom에서 CSR 방식으로 페이지를 효율적으로 이동시킬 수 있게 된다.
<Link> 태그를 추가하고, to ={}안에는 이동하고 싶은 경로를 작성하면 된다.
country를 누르면 /country로 이동하고, search를 누르면 /search로 이동하는 것을 확인할 수 있다.
Link 컴포넌트를 이용하면 CSR방식이기에 아무리 이동해도 페이지가 깜빡이거나 새로고침 되지 않는다. 효율적인 페이지 이동이 되는 것이다.
만약 a태그를 이용해서 페이지를 이동하면 이동은 잘된다. 하지만 이때는 CSR이 아니라, 서버에게 요청을 보내고 받는 방식이기에, 페이지를 이동할 때마다 깜빡거리고 새로고침된다.
그래서 리액트에서는 a태그가 아니라 Link태그로 네비게이팅을 구현한다.
- 이벤트 핸들러가 실행됐을 때, 페이지를 이동시키는 방법
버튼을 생성하고, 버튼을 눌렀을 때 실행될 핸들러도 생성한다.
그리고 react-route-dom을부터 useNavigate를 불러와준다.
useNavigate는 리액트 라우트가 제공하는 커스텀 훅으로, 페이지를 이동시킬 수 있는 함수를 반환한다.
nav 변수에 useNavigate 훅이 반환하는 ‘페이지를 이동시킬 수 있는 함수’를 저정한다. 이렇게 하면 기본 세팅은 끝난다.
이제 버튼이 클릭 됐을 때 /search로 이동하기 위해서, onClick 핸들러에서 nav 함수를 호출하고 인수로 이동할 경로를 넣어준다.
<Home/> 컴포넌트에서 버튼을 눌렀을 때, <search/> 컴포넌트로 이동하는 것을 확인할 수 있다.
정리 : useNavigate 훅을 이용해서 함수 안에서도 페이지 이동을 구현할 수 있다
동적 라우팅의 개념
/search?q=exampleURL 뒤에 '?{이름}={값}' 형태로 동적인 데이터를 전달하는 방식을 Query String라고 한다.
/search/ExampleURL 뒤에 '/{값}' 형태로 동적인 데이터를 전달하는 방식을 URL Parameter라고 한다.
동적인 데이터를 포함하는 경로를 동적경로(Dynamic Paths)라고 하고, 이에 제공된 데이터를 꺼내 오거나, 데이터에 따라 적절한 페이지를 렌더링 하는 것을 동적 라우팅(Dynamic Routing)라고 한다.
즉 동적 라우팅은 Query String, URL Parameter와 같은 동적 경로에 대응하는 것을 말한다.
동적 경로에 대응
/search 경로를 기준으로 설명
- Query String 경로 대응
Search 컴포넌트로 이동 후 Query String를 불러오는 useSearchParams 커스텀 훅을 불러온다.
useSearchParams훅은 useState처럼 두 개의 값을 반환한다.
첫 번째 값은 현재 어떤 Query String들이 들어있는지에 대한 정보를 보관하고 있는 객체를 반환하고, 두 번째 값은 현재 Query String의 값을 변경할 수 있는 함수를 반환한다.
반환받은 searchParams를 JSX 문법 안에서 사용한다.
get 메서드 호출 이후, 인수로는 불러오고 싶은 Query String의 이름을 전달하면 된다. 위에서는 q를 전달했다. 저장하고 확인해 보면
Query String로부터 입력되는 값을 잘 꺼내오는 것을 확인할 수 있다.
정리 : Query String를 불러올 때는 리액트의 useSearchParams 훅을 사용하면 된다.
- URL Parameter 경로에 대응
url 파라미터에 대응하려면, Query String 대응과 다르게 Route 컴포넌트의 path 경로 안에서 URL Parameter를 사용할 것을 명시해줘야 한다.
* 이렇게 URL Parameter를 설정했으면, 앞으로 경로에는 무조건 /와 함께 URL Parameter를 붙여줘야 한다.
오른쪽 사진처럼 설정하면, Country 경로 뒤에 오는 무언가가 code를 의미한다는 것을 명시해 주는 것이다.
Country 컴포넌트로 이동 후 URL Parameter를 이용하기 위해 useParams라는 훅을 불러와준다. 그리고 변수를 생성해서 useParams를 호출해 준다. 이렇게 되면 params라는 변수에 현재 URL Parameter 값들이 객체형태로 저장된다.
확인을 위해 console.log를 찍어보면
URL Parameter 값이 잘 출력되는 것을 확인할 수 있다.
JSX 문법 안에서도 다음과 같이 URL Parameter를 잘 꺼내 쓸 수 있다.