프로젝트 기간동안 꼭 사용해 보고싶었던 기능 이지만 프로젝트에서 맡은 부분은 사용할일이 없었기 때문에 프로젝트가 끝난 오늘 학습해보기로 했다.
우선 useParams는 다양한 리스트가 있는 페이지에서 한가지의 정보에 접근할때 쓰이는 hook이다.
사용을 위해선 router부분에 path parameter라는 개념을 사용해야하는데 사용법이 매우 간단하다.
Route path="/detail/:id" element={<someDetailComponent>};
아래와 같이 : 뒤에 붙는 id와 같은 문자열 처럼 사용하면 된다.
만약 List 가 있는 컴포넌트에서 아래와 같은 링크 테그가 있다면 위의 router에서 지정해준 id의 값은 1이 되는 것이다.
<Link to="detail/1">go to post/1</Link>
여기서 문제가 하나 있는데, 위처럼 동적 라우팅을 이용해 설정한 경로로 유저가 들어와도 동일한 UI밖에 보여주지 못한다.
그래서 사용하는것이 오늘의 주제인 useParams이다.
Detail이 있는 컴포넌트에서 import { useParams } from "react-router-dom"; 을 위에 선언해주고 const params = useParams(); params 변수를 선언해준 뒤 다시 const id = params.id; id 변수를 선언해주고 <h2>path parameter:{id}</h2>와 같은 값을 입력해주면 디테일 페이지로 이동했을때 마다 id값에 맞는 페이지 UI가 렌더링 되는것을 확인해볼수 있다.
느낀점
2주간 프로젝트를 하며 지치기도 하고 나의 부족한 부분을 너무 잘 알게 되었다. 비록 실전에서 useParams를 경험하진 못했지만 프로젝트가 끝난 오늘 바로 능동적으로 아쉬웠던 점을 학습 했다는것에 조금의 보람을 느낀다.
많이 부족하고 배워야 할것들이 많지만, 지금 내가 서있는 위치는 중요하지 않다. 다만 모르는 것은 바로 학습하고 실전에서 사용해 보고싶다는 열정을 가진 지금의 나를 계속 이어 나가도록 하겠다.
매일 꾸준히 나 자신을 개발하는 개발자가 되겠다. 그리고 꼭 언젠간 훌륭한 개발자가 되겠다.
