프로젝트 진행 중 마주친 Trouble...
들어가기 전..
<SearchResult />컴포넌트는 keyword를 포함하는 영화의 목록을 페이지에 뿌려주는 역할을 한다.
내가 생각한 기능은 일단 Input 필드에 키워드(keyword) 검색을 하고 Enter 를 누르면 해당 키워드가 포함된 path 로 설정이 되고 이때 지정한 컴포넌트(나의 프로젝트에서는 <SearchResult /> 로 Routing이 된다.)
변경된 컴포넌트에서도 Input 필드가 똑같이 존재하는데, 여기서 검색을 했을 경우 라우팅이 되지 않았다.
예를 들어, keyword 가 "john wick" 이면, path="/search/john wick" 으로 설정되고 <SearchResult /> 컴포넌트를 렌더링한다.
내가 원하는 방식은 <SearchResult /> 컴포넌트에서도 검색을 할 수 있는 Input 필드가 존재하는데, 만약 이번에는 keyword 를 "maze runner" 로 검색을 하면, path="/search/maze runner" 로 설정되고, 해당 결과를 뿌려주는 <SearchResult/> 를 렌더링 해줘야 한다.
하지만, 아무리 Enter를 눌러도 페이지에는 변화가 없었다.
해결 방법
내가 사용한 코드는 다음과 같다.
const searchHandler = (enteredKeyword, enteredKeyCode) => {
if (enteredKeyword.trim().length !== 0 && enteredKeyCode === 13) {
routePageHandler(enteredKeyword);
}
};
const routePageHandler = (enteredKeyword) => {
navigate(`/search/${enteredKeyword}`);
navigate(0);
};
searchHanlder는 Input 필드에서 입력한 키워드와 Enter의 키코드를 받는다.if조건을 만족한다면routePageHandler를 호출한다.
routePageHandler는 실질적으로 page를 라우팅하는 함수이고
먼저navigate('/search/${enteredKeyword})'를 호출한다.
(이는/search/${enteredKeyword}경로로 이동하라는 의미이다.)
그리고 나서navigate(0)을 호출한다.
(navigate(0)은 페이지 새로고침을 의미한다.)
이렇게 작성하면, 원하는 결과를 얻을 수 있다!
(처음에는 navigate(0) 을 호출하지 않아서 경로만 바뀌고 페이지가 렌더링 되지는 않았다. )
참고
참고로 navigate는 내가 선언한 변수 이름이다.
const navigate = useNavigate() 이렇게 선언했다.
(변수 이름은 그대로 써도 되고, 바꿔서 써도 되고...)
useNavigate의 인자
공식 문서에 따르면 useNavigate 에 어떤 인자를 넣느냐에 따라 기능을 달리한다.
useNavigate(-1): 페이지 뒤로 이동(뒤로가기)useNavigate(0): 페이지 새로 고침useNavigate(-2): 페이지 2번 뒤로 이동(아마도?)
다시보니 정말 하지말아야 할 실수를 한 것 같다.
같은 실수를 한 사람들이 있을까? 😭
공식 문서를 좀 더 자세히 살펴보도록 하자..
