[Learning React] 11장 - 리액트 라우터

11.0 리액트 라우터

  - 라우팅

    - SPA에서는 JS가 정보를 가져와서 UI 갱신

    - 라우팅: 클라이언트의 요청을 처리할 endpoint 찾는 과정

      - endpoint를 사용하여 요청받은 콘텐츠 식별 가능

    - 리액트에는 표준 라우터가 없음

      - 리액트 라우터; 리액트 앱을 위한 라우팅 솔루션

11.1 라우터 사용하기

  - react-router, react-router-dom 모듈

    - App 컴포넌트를 <BrowserRouter> 컴포넌트 자식으로 넣기 (index.js)

    - Routes 컴포넌트 안에 Route 컴포넌트의 프로퍼티로 path, element 설정 (App.js)

    - react-router-dom은 브라우저 링크를 만들어주는 Link 컴포넌트 제공 - to 프로퍼티 활용

11.2 라우터 프로퍼티

  - useLocation 훅; 현재 위치(현재 네비게이션한 페이지)를 알려줌

  - 경로 내포시키기

    - 중첩 라우터는 Route 컴포넌트 내의 Route 컴포넌트로 위치

    - Outlet 컴포넌트 사용하면 내포된 컴포넌트 렌더링 가능

    - Outlet을 렌더링하고 싶은 자식 콘텐츠에 위치시키면 됨

11.3 리디렉션 사용하기

  - Redirect 컴포넌트; react-router-dom 6.xx에서는 지원 X

  - useRoutes 훅

    - redirectTo 프로퍼티 없어진 것 같음

  - 라우팅 파라미터

    - 라우팅 파라미터; URL에서 값을 얻을 수 있는 변수

    - useParams 훅; 경로에 있는 파라미터가 포함된 객체 확인 가능

    - useNavigate 훅; 다른 페이지로 내비게이션할 때 쓸 수 있는 함수 반환

    - 사용자가 URL의 세부 사항을 모두 기억하기를 원하는 경우에만 라우팅 파라미터 사용하기!

---

[Source Code] 러닝 리액트 Ch11. 리액트 라우터