react-router-dom을 이용한 페이징 구현

간단한 프로젝트 중,

항목에 따라 4개의 세부 설명 페이지를 만들어야했었다.

원래 4개의 페이지를 하드 코딩했었는데,
다른 팀원이 useParams()을 이용해 하나의 페이지에서 제공하는 식으로 해달라고 해서 바꿔봤다.
즉, 백엔드에서 가져오는 데이터만 다르고 전체적인 컴포넌트는 동일하다면, 반복적인 코드보다 간결하게 하는 것이 좋다.

<Link to="/intro/4" className="BtnToRoom">
<Link to="/intro/6" className="BtnToRoom">
<Link to="/intro/10" className="BtnToRoom">
<Link to="/intro/20" className="BtnToRoom">

위처럼 해당하는 페이지의 url을 추가해주고,
react-router-dom에 있는 useParams()를 사용했다.

useParams()는 해당 페이지의 url을,
보다 정확히는 router에서 작성해놓은 부분에 해당하는 값을 가져온다.

const a = useParams();

를 작성하고

a를 출력하면,

<Route path="/intro/:roomNum" element={<RoomInfos />} />

router.js에서 작성했던 뒤의 정보가 객체 형태로 출력된다.

(실제로 roomNum으로 출력된 것을 볼 수 있다.)

내가 쓰려고 하는 정보는 roomNum이므로 a.roomNum으로 접근했다.

그리고 꽤나 해멨던 부분인데,
string형태로 나온다...
내가 백엔드에 저장했던 정보는 정수형이기 때문에,
데이터와 비교연산해서 가져오는 함수에서 parseInt()를 해주어야했다.

쓸데없이 4개의 js파일을 만드는 것보다 훨씬 깔끔해졌다.