[React-Router] React Router

라우팅(Routing)이란 ?

: 주소에 url을 입력했을때 서버에서 해당 url에 해당하는 데이터를 요청하고 받아오는 것

• network 툴에서 받아오는 데이터를 확인할 수있다.
• 해당하는 페이지로 들어가기 위해 url에 맞는 데이터를 받아온다.
  
  [출처 : 생활코딩 블로그]

CSR(Client Side Routing)

: url은 업데이트 되지만 상단의 Navbar나 Sidebar는 유지될 수 있고, url과 메인 body 부분만 업데이트 되는 것

• 완전히 새로운 내용의 Html을 받아오는 것이 아닌 fetch를 이용해 필요한 부분만 데이터를 받아와서 동적으로 데이터를 요청하는 것
• 페이지는 그대로 유지된다 ( Reload 되지 않음 ! )

React-Router를 왜 사용할까 ?

: React 애플리케이션에서 클라이언트 측 라우팅을 구현하는 데 사용되는 라이브러리.

그냥 a태그 사용해서 페이지 이동시켜주면 되지 않을까 ?
➡️ a태그를 사용하게 되면 페이지 전체가 새로 로딩된다. (깜빡임 발생 -> 사용자의 UX를 떨어뜨리는 요인)

• CSR을 가능하게 하고, 사용자가 그 페이지에 있는 링크를 클릭할 때 마다 서버에게 새로운 문서를 요청해주는 역할
• 사용자가 링크를 클릭했을 때 서버에게 새로운 문서를 요청할 필요 없이 URL을 보여줄 수 있다. (fetch)
• 사용자에게 더 나은 UX를 제공해주고, 부분적인 UI만 업데이트 할 수 있다.

어떻게 사용할까 ?

1. 최신버전 설치

npm

npm install react-router-dom@lastest

만약 이미 다운로드 받은 상태라면, 내가 받은 라우터가 최신 버전인지 확인

• package.json 파일을 확인하여 버전 확인 가능

    "react-router-dom": "^6.22.1",

• 라우터 6.4v에서는 createBrowserRouter 방식을 권장하고 있기 때문에 createBrowserRouter를 사용하는 것이 좋다.

2. 사용법

• Router.js : 각 path에 맞는 element를 매칭하여 내보내는 역할
  react-router-dom에서 createBrowserRouter를 import한다.
  각 페이지에서 보여줄 path와 element, 중첩 라우팅을 위한 children ,errorElement를 작성한다.
  ( 배열 안에 담긴 객체 형태로 담아 export)
  그리고 App 컴포넌트를 RouterProvider로 감싸 router를 설정 해준다.

App.js

• index.js : 어떤 것을 렌더링하여 돔에 그릴지를 작성한다.

Root.jsx

• Navbar : 고정되는 부분
• Outlet : ⭐️ URL에 따라 동적으로 변경되는 부분 ⭐️

화면에서 URL 변경에 따라 다르게 보여주고 싶은 것들을 <Outlet/>을 사용하여 넣어준다.

Product.jsx

• 상품 목록
  

Link 컴포넌트를 사용하지 않고 다른 페이지로 이동하고 싶은 경우
useNavigate를 통해 이동시킬 수 있다.

• 페이지 뒤로가기, 앞으로 가기 등에도 이용된다.
• 사용자가 이동하고 싶은 상품 번호를 입력하면 해당 url로 이동시켜주는 역할

ProductDetail.jsx

• 상품 상세페이지

• /product/:productId 와 같이 경로에 : 를 사용하여 설정한다.
  ➡️ URL파라미터가 여러개인 경우에는 /product/:productId/:productName 과 같은 형태로 설정할 수있다.
  

useParam를 사용하여 해당 URL에서 productId를 받아와 이를 활용하여 디테일 페이지를 보여줄 수 있다.