[버전 6.15.0]
React Router DOM
React Router DOM는 react 커뮤니티에서 가장 많이 사용되는 클라이언트 라우팅 (client-side routing) 패키지이다. 클라이언트 라우팅이란 SPA의 대표적인 기능 중 하나로, URL을 서버에 전송에 html을 받아오게 하는 것이 아닌 동적인 js의 움직임이며, 한 페이지내에서 컴포넌트를 교체하는 방식의 페이지 이동이다. 이러한 기능을 구현한 라이브러리가 대표적으로 React Router DOM 이다.
이 라이브러리의 6버전은 이전 버전과 달리 react hooks 기술에 맞춰 제작되었다. React Router 또한 컨텍스트 기반으로 설계되었으므로 컨텍스트 제공자인 BrowserRouter를 최상위 컴포넌트에 사용해야 한다.
설치
npm i react-router-dom
주요 컴포넌트
React Router의 중요한 기능인 Route, Routes, Link에 대해 알아보자
<Route />
주소창에 경로 '/' 를 통해 페이지 전환 기능을 하는 컴포넌트이다.path와element속성을 가지고 있으며path는 경로를,element는 렌더링할 페이지(컴포넌트)를 넣어준다.
<Route path='/' element={<HomePage />} />만약 모든 경로를 하나의 컴포넌트로 라우팅하고 싶으면 다음처럼 path 경로를 *로 설정한다. 주로 잘못된 경로에 접속할 때 적용하면 좋다.
<Route path='*' element={<NoMatch />} />컴포넌트를 주는 속성의 이름이 component가 아닌 element인 이뉴는, 만약 컴포넌트 처럼 Nomatch 이렇게 전달하면 props를 설정할 수 없기 때문이다. 대신 태그 형식으로 element 처럼 전달하면 만약 props가 필요한 경우 전달할 수 있다.
<Route path='/' element={HomaPage} /> // x
<Route path='/' element={<HomaPage title='Hello HomePage!'/>} /> // o<Routes />
컴포넌트 페이지를 나타내주는<Route />컴포넌트는 단독으로 쓰일 수 없다. 이를 감싸주는 부모 컴포넌트인<Routes />컴포넌트로 감싸줘야 한다. 또한:를 통해 쿼리 매개변수로 전달하여 독립적인 페이지를 만들 수 있다.
<BrowserRouter> // root provider
<Routes> // route를 감싸는 부모 컴포넌트
<Route path='*' element={<NoMatch />} />
<Route path='/' element={<HomePage />} />
<Route path='/login' element={<LoginPage />} />
<Route path='/signIn' element={<SignInPage />} />
<Route path='/user/:id' element={<UserPage />} />
....
....
....
</Routes>
</BrowserRouter> <Link />
이 컴포넌트는<a>요소의 href 속성 대신 사용하는 React Router 전용 페이지 이동 컴포넌트 이다.toprops를 통해 적용된 컴포넌트로 이동한다.
// 네비게이션 컴포넌트에 적용해주면 좋다
<Link to='/'>Home</Link>
<Link to='/login'>Login</Link>
<Link to='/signIn'>Sign In</Link>주요 훅
useNavigate()
이 훅을 선언하면 페이지 이동을 할 수 있게 해주는 함수를 반환한다. 이후 이 함수에 인자로 path값을 넘겨주면 해당 경로로 이동할 수 있다. 이러한 path값은 개발자가 Route에서 정의한 경로를 넣어주면 된다.
const navigate = useNavigate();
...
navigate('/'); // 메인 페이지로 이동
navigate('/login'); // 로그인 페이지로 이동
navigate(-1); // 뒤로 이동<Link /> 컴포넌트는 단순한 이동만을 구현하지만, useNavigate()는 함수이므로, 이동과 함께 다양한 로직을 동시에 처리할 수 있다는 특징이 있다. 때문에 간단한 이동 상황에서는 <Link /> 컴포넌트를 사용하고, 또 다른 로직이 필요할 땐 이 훅을 사용하면 좋다.
useParams()
현재 경로에 있는 쿼리 매개변수를 추출하고자 할 때 사용한다. 특정 유저의 페이지에 접속하고자 할 때 사용된다.
const { id } = useParams(); // 해당 경로의 id 파라미터를 가져와준다.useSearchParams()
쿼리의 매개변수가?name=jake&age=20처럼 여러개 일 때, 변수들을 가져오게 할 수 있다. 선언하면 길이가 2인 튜플이 리턴된다.
// 세터함수는 잘 사용하는 일이 없으므로 searchParams만 선언해도 상관없다.
const [searchParams, setSearchPrarams] = useSearchParams();
// get함수로 가져올 수 있다.
const name = searchParams.get('name') // jake
const age = searchparams.get('age'); // 20