[react] 리액트 라우터 사용하기 (6.11.2 버전 기준)

리액트는 SPA(single page aplication) 로 페이지가 1개인 어플리케이션이다. 1개인 페이지 새로고침 없이 필요한 부분을 렌더링 시켜 주소에 맞춰 필요한 화면을 보여준다.
이때 필요한 것이 바로 React Router 이다.
리액트에서 만든 공식 라우팅 라이브러리는 아니지만 가장 많이 쓰이는, 리액트 프로젝트에서 필수템인 써드파티 라이브러리 이다.

빨리빨리 업데이트 되어서 사용전 버전 확인이 꼭 필요한 것 같다.
(5버전과 6버전이 굉장히 다름..)

리액트 라우터 설치 방법

npm install react-router-dom 

리액트 라우터 사용 방법

BrowserRouter, Routes, Route를 import해서 아래와 같이 작성해준다.

App.jsx

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/detail" element={<Detail />} />
      </Routes>
    </Router>
  );
}
export default App;

Route 경로와 원하는 컴포넌트를 연결 시켜주면 된다.
참고로 path="/" 는 home으로 연결된다.

<Route path="/" element={<Home />} />

Link 사용방법

리액트 라우터에서 Link는 html에서 <a> 태그와 비슷한 역할을 한다.
Link를 넣어주면 원하는 컴포넌트로 이동할 수 있다.

<Link to ="/"><h1>제목</h1></Link>

위와 같이 작성해주면 제목을 클릭할시 home 컴포넌트로 이동된다!

useParams() 사용법

useParams()는 이번에 수업을 들으면서 처음 접하게 되었다.
변수안에 링크 주소를 넣어준다..? 로 이해했다..
예를들면, 하나의 제품 상세페이지를 만들때 일일히 주소를 만들어주고
안에 내용을 채우는게 아니라, 동적으로 받아와서 id만 바꿔주면 상세페이지를 하나만 만들어두면 되는것..! (뭔가 말이 정리가 안되네;)

사용방법

<Route path="/detail/:id" element={<Detail />} />

상세페이지가 들어가는 Detail 컴포넌트를 하나 만들어두고
변수 이름을 id로 만들어서 :뒤에 적어준다. (물론 변수 이름은 자유~)

Detail.jsx로 이동하여,

import { useParams } from "react-router-dom";

function Detail() {
  const {id} = useParams();
}

useParams() 훅을 이용하여 id를 받아온다.

받아온 id를 이용해서 세부 api를 동적으로 받아왔다.

예전에 티빙 클론 코딩을 할때 엄두도 안났던 부분인데.. useParams()를 쓰면 훠얼씬 쉽게 가능했을거 같은데 구현 못했던게 생각나서 아쉬웠다.