useContext 리팩토링 썸네일형 리스트형 [TIL-32] 실전 프로젝트 - 검색 기능 구현(useContext로 전역 상태, 검색 쿼리 관리하기) Today목표 : 06/04일 실전 프로젝트 : 검색 기능 구현 - useContext로 전역 상태(검색 쿼리) 관리 하기 오늘은 내가 맡은 스코프 중 메인 페이지의 검색 기능을 구현하며 사용한 useContext의 기본적인 사용 방법과 리팩토링 과정을 정리해 보려고 한다. 우선 검색 기능 플로우를 살펴보자. 사용자가 header의 검색 아이콘을 클릭하면 토글이 내려와 검색어를 입력하도록 한다. 검색된 결과물은 메인 페이지에 보여져야 한다. 메인 페이지와 header는 Layout 컴포넌트 하위에 위치하고 있다. 각각 별개의 컴포넌트에서 검색 쿼리에 대한 데이터를 주고 받아야 하기 때문에, 전역적으로 상태를 관리해야 할 필요성이 있다고 생각했다. 이에 지금까지는 클라이언트 전역 상태를 redux를 사용해.. 더보기 이전 1 다음