#패스트캠퍼스 #패스트캠퍼스부트캠프 #프론트엔드프로젝트십
useparam hook을 이용하여..
uselocation을 활용하여 현재 url정보를 가져올 수 있다.
검색페이지 구현을 할때는 navigate함수를 이용해서 다른 컴포넌트로 이동을 해주었다. 즉, search page 컴포넌트로 이동을 한다. spider이라는 text를 가져와서 the moviedb api에 요청을 주어야 하는데 얘를 가져올 때 url에 대한 정보를 가지고 있는 useLocation().search 프로퍼티 안에 있는 값이 바로 ?q=spiderman이었는데, 거기서 spiderman 부분만 가져오기 위해 사용했던 것이 urlsearchparams 였다.
q에 대한 값을 get메소드로 얻어왔었다.
요청을보내고 그값을 state에 넣어주는 처리를 해주었다.
여기까지가 ui 부분이었고, 다음은
한글자마다 요청을 보내는 불필요한 로드가 추가될 수 있어서, 어느정도 시간이 지난후에 지금까지 타이핑 된 것으로 요청을 보낼 수 있도록 하기 위해서 debounce hook을 만들었다.
state가 변할때 요청을 보내는 것으로 바꾸었는데, setTimeout에서 delay가 지난다음에 debounceValue로 업데이트가 된다. 그렇지 않으면..
<상세 페이지에서 영화 상세 정보 가져오기>
movie id가 locathost:3000/323으로 들어왔는데, useparams hooks를 이용해서 가져왔다. let {movieId}인 이유는 라우터에서 정의할 때 movieId로 정했기 때문에 똑같이 쓴다.
<모달창 외부 클릭시 모달창을 닫게 만드는 커스텀 훅스 생성>