원티드 프리온보딩 과정을 진행하면서 영화 트레일러 사이트 만들기 과제를 진행하게 됐다.
🎯 목표
검색 부분을 구현하다 나는 넷플릭스처럼 검색어에 따라 실시간으로 URL의 쿼리가 변경되면서 쿼리에 따라 검색 결과가 실시간으로 나오게하고 싶었다.
🛠 시도한 방법
이를 위해 내가 사용한 코드는 다음과 같다.
이런식으로 Input의 onChange 이벤트로 input의 value를 state에 저장하고 라우팅 시켜주면 Search 페이지에서는 쿼리의 값을 useLocation을 통해 가져와서 API 요청을 하는 식으로 구현을 했다.
그렇지만 위와 같은 방식으로 구현하니 아래와 같이 검색 단어가 1자리씩 덜 나오는 현상이 발생했다.
처음 생각했을 때는 위에 있는 handleSearchValue에서 발생하는 setSearchValue와 navigate 함수가 순차적으로 이루어진다고 생각했다.
다시 말해, "state에 저장을 하고 저장된 state로 navigate 시킨다"고 생각했었다.
💡 문제 해결
하지만 실제 동작은 그렇게 이루어지지 않았고 이를 해결하기 위해 아래와 같이
input의 값을 따로 state로 관리하지 않고 바로 navigate 함수로 넘기니 원하는대로 동작하게 됐다.
이렇게 구현하니 쓸데없는 상태 또한 제거 됐고 form 태그로 input을 감싸서 onSubmit 이벤트를 주입해줄 필요도 없게 됐다.
수정 후 동작 화면
🎉 마무리
사실 내가 생각했던과 다르게 URL이 변경되지 않은 점에 대해서는 알아봐야할 것 같다.
++ 추가
React에서 useState의 setState 함수는 비동기적으로 수행이 된다.
따라서, setState가 완료되기 전에 navigate를 시켜주기 때문에 원하는 대로 동작하지 않았던 것이다.
그렇다면 왜 setState는 비동기로 동작하는걸까?
하나의 페이지나 컴포넌트 내에도 수많은 상태값이 존재한다. 만약 이 상태 하나하나가 바뀔 때마다 화면을 리렌더링 한다면 문제가 생길수도 있다.
때문에 리액트는 성능의 향상을 위해서 setState를 연속 호출하면 배치 처리하여 한 번에 렌더링하도록 하였다. 아무리 많은 setState가 연속적으로 사용되었어도 배치 처리에 의해서 한 번의 렌더링으로 최신 상태를 유지하는 것이다.
