React-Router-Dom v6 (hook 사용)
프로젝트를 하면서 React-Router-Dom v6을 사용했지만 기본적인 라우팅과 경로 이동 수단으로만 사용했었다.
이번에 Youtube 클론 코딩을 진행하면서 라우팅 및 기능 구현을 위해 useLocation, useParams, useNavigate 3가지 hook을 활용하였고,
매우 유용하게 사용했기에 어떻게 사용했는지 기록하고자 한다.
1. 뒤로가기, 앞으로가기 시 input에 keyword 유지
위처럼 뒤로 가기, 앞으로가기 시 input 창에 keyword도 유지되고, 그에 따른 데이터도 유지되도록 구현하고자 했다.
path는 '/video/watch/:keyword'로 설정하여 검색 시 url도 변경되도록 하였다.
데이터 유지 (useParams 사용)
keyword를 useParams()로부터 받아와 리액트쿼리 key 값으로 사용하였다. 때문에 url이 바뀔 때마다 keyword도 변경되고 리액트쿼리를 통해 캐싱 해둔 데이터를 사용함으로써 데이터를 유지할 수 있었다.
검색창 keyword 유지 (useLocation 사용)
useLocation()을 통해 pathname을 가져와 useEffect 콜백 함수에서 setText 함수를 통해 text의 상태 값을 변경해 input의 value가 유지되도록 구현하였다. pathname은 '/vidoes/keyword' 형태의 값을 가지기 때문에 split을 이용해 keyword 값만 추출하였다.
여기서도 useParmas을 사용해서 keyword만 가져오면 되지 왜 번거롭게 useLocation을 써?
물론 시도를 안 해본 것은 아니다. 결과적으로는 SearchHeader는 라우팅이 설정된 컴포넌트 아니기 때문에 useParams를 사용할 수 없다.
Video 컴포넌트는 Route로 path가 설정되어 있지만, SearchHeader는 path가 설정되어 있지 않았기 때문이다.
그래서 useLocation을 사용할 수밖에 없었다.
2. useNavigate로 state 전달 (useLocation으로 받기)
VideoCard를 클릭하면 VideoDetail 페이지로 이동하게 되는데, video 상세정보를 제공해 주는 api가 없다면..? 어떻게 데이터를 보내지?
이번 유튜브 클론 코딩을 하면서 마주한 상황이다. list로만 제공하였기 때문에 VideoDetail 컴포넌트 안에서 데이터 통신을 할 수 없었다.
이런 경우 useNavigate를 통해 state를 보내주면 된다. 아래와 같이 경로와 state를 navigate를 통해 보내줄 수 있다.
(지금까지 useNavigate는 경로 이동처리 수단으로만 사용했기에 매우 신기했다... 역시 배울게 너무 많아...)
이렇게 보내진 state는 VideoDetail 컴포넌트에서는 useLocation()의 state key를 통해 받아볼 수 있다.
마무리
이틀을 계획하고 진행했던 Youtube 클론 코딩... 프로젝트를 하고 난 뒤여서 쉬울 거라 예상했지만, 생각보다는 막히는 부분이 있었다.
예전에 이었으면 막혀서 쉬고, 좌절하고 했겠지만 프로젝트 이후 해결하고자 하는 마인드가 강해져서인지 나름 빡세게(?) 했던 것 같다.
짧은 기간이지만 배운 게 많았던 뿌듯한 시간이었으므로 매우 만족!
