라우팅이란?
사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이라고 생각하면 된다.
- 여러 페이지에서 리액트에서의 라우팅 방법
리액트에는 html파일이 하나밖에 없다. (Single Page API)
따라서 페이지 이동을 할 때 필요한 컴포넌트만 뽑아 보여준다.- SPA를 사용하는 이유
Multi Page를 이용하게 되면 많은 html 파일이 생성되는데, state를 일일히 주기가 어렵다. 따라서 state관리가 쉬운 Single Page를 사용한다.
React Router?
사용자가 입력한 주소를 감지하는 역할을 하며, 여러 환경에서 동작할 수 있도록 여러 종유의 라우터 컴포넌트를 제공한다.
라우터의 종류?
BrowserRouter
HashRouter
BrowserRouter 특징
- HTML5의 history API를 활용해서 UI를 업데이트 한다.
- 동적인 페이지에 적합하다. (서버에 있는 데이터들을 스크립트에 의해 가공 처리 한 후 생성되어 전달되는 웹페이지)
- 새로 고침 하면 경로를 찾지 못해서 에러가 난다. (주소를 사용하여 페이지를 찾아갈 때에도 에러 발생) 이를 해결하기 위해서는 서버에 추가적인 세팅이 필요하다.
- 페이지의 유무를 서버에 알려줘야 하며 서버 세팅시 검색엔진에 신경써야한다.
- github pages에서 설정하기 복잡하다. (배포가 복잡)
HashRouter 특징
- URL의 hash를 활용한 라우터이다.
- 주소에 #가 붙는다.
- 정적인 페이지에 적합하다. (미리 저장된 페이지가 그대로 보여지는 웹페이지)
- 검색 엔진으로 읽지 못한다.
- 값 때문에 서버가 읽지 못하고 서버가 페이지의 유무를 알지 못하기 때문. (그 이유 때문에 거의 사용하지 않는다.)
- 새로고침 해도 에러가 나지 않는다.
- github pages에서 설정하기 간편하다. (배포가 간편)
$ yarn add react-router-dom // 설치CreateBrowserRouter
이것은 모든 React Router 웹 프로젝트에 권장되는 라우터입니다. DOM History API를 사용하여 URL을 업데이트하고 기록 스택을 관리합니다.
CreateBrowserRouter 공식문서<RouterProvider router={router} />
useNavigate
중요! 일반적으로 이 훅보다 loaders 및 actions에서 redirect을 사용하는 것이 좋습니다.
UseNavigate 공식문서import { useNavigate } from "react-router-dom"; const navigate = useNavigate(); // navigate(-1)은 뒤로 버튼을 누르는 것과 같습니다. navigate("/about"); // 다른 예시 const Button = ({ text }) => { const navigate = useNavigate(); const handleClick = () => { const path = text === "Home" ? "/" : `/${text}`; navigate(`${path}`); }; ... };
useParams
useParams 훅은 < Route path >와 일치하는 현재 URL에서 동적 매개변수의 key/value 쌍 객체를 반환합니다. 하위 경로는 상위 경로에서 모든 매개변수를 상속합니다.
useParams 공식문서
import { useParams } from "react-router-dom";
const params = useParams();localhost:3000/Followers // 절대 경로 사용
localhost:3000/users/Followers // 상대 경로 사용
/* Link to 에서 "/Followers"라고 하면 /는 절대 경로이다.
-> 루트 바로 다음부터 시작하는 경로를 의미한다.
만약 /를 사용하지 않는다면 상대경로를 의미하며, 지금 현재 있는 그 경로 다음에 경로가 추가된다. Outlet
Outlet은 하위 경로 요소를 렌더링하기 위해 상위 경로 요소에서 사용합니다.
이렇게 하면 하위 경로가 렌더링될 때 중첩된 UI가 표시될 수 있습니다. 상위 경로가 정확히 일치하면 하위 index 경로를 렌더링하거나 index 경로가 없으면 아무것도 렌더링하지 않습니다.
ex) < Outlet />
Outlet 공식문서// 자식 const router = createBrowserRouter([ { path: "/", element: <Root />, children: [ // 이것이 Outlet { path: "", element: <Home />, errorElement: <ErrorComponent />, }, { path: "about", element: <About />, }, { path: "users/:userId", element: <User />, children: [ { path: "followers", element: <Followers />, errorElement: <ErrorComponent />, }, ], }, ], errorElement: <NotFound />, }, ]); // 부모 const User = () => { const { userId } = useParams(); return ( <div> <h1> User with id {userId} is named {users[Number(userId) - 1].name} </h1> <hr /> <Link to="followers">See Followers</Link> <Outlet context={{ nameOfmyUser: users[Number(userId) - 1].name }} /> // Outlet 사용 </div> ); };
useOutletContext
종종 상위 경로는 하위 경로와 state 또는 기타 값을 공유합니다.
원하는 경우 context provider를 만들 수 있지만 Outlet에 기본 제공되는 context를 사용할 수도 있습니다.
outletContext 공식문서import { useOutletContext } from "react-router-dom"; < Outlet context={ {a:1, b:2} } />; const context = useOutletContext(); // {a:1, b:2} // 예시 import { useOutletContext } from "react-router-dom"; interface IFollowersContext { nameOfmyUser: string; } const Followers = () => { const { nameOfmyUser } = useOutletContext<IFollowersContext>(); return <h1>Here are 의 {nameOfmyUser} Follwers</h1>; }; export default Followers;
useSearchParams
useSearchParams 훅은 현재 위치에 대한 URL의 쿼리 문자열을 읽고 수정하는 데 사용됩니다. useState 훅과 마찬가지로 useSearchParams는 현재 위치의 search params와 이를 업데이트하는 데 사용할 수 있는 함수라는 두 가지 값의 배열을 반환합니다.
setSearchParams 함수는 탐색과 같이 작동하지만 URL의 검색 부분에 대해서만 작동합니다.
let [searchParams, setSearchParams] = useSearchParams();
setSearchParams(params);버전 6부터 errorElement가 생김 -> 버전 5까지 없었음
errorElement ?
경로에 대한 일반 렌더링 경로() 대신 loader, action 또는 컴포넌트 렌더링에서 예외가 발생하면 오류 경로가 렌더링되고() 오류는 useRouteError로 사용할 수 있습니다.
주의! 이 기능은 createBrowserRouter와 같은 데이터 라우터를 사용하는 경우에만 작동합니다.
에러가 생긴 경우 보여주는 페이지.
다른 멀쩡한 페이지가 에러의 영향을 받지 않게 해준다.
여담으로.. 네이버 블로그를 사용하다가 처음으로 벨로그를 사용해보는데 html 태그로 작성이 된다니 신기하네요!
