React에서 검색 폼과 리스트 렌더링 최적화하기
React에서 검색 조건이 있는 리스트 화면을 구현할 때, 입력값 변경마다 API가 호출되는 문제를 방지하고 검색 버튼 클릭 시에만 요청하도록 설계하는 방법을 살펴봅니다.
문제 상황
검색 조건을 상태로 관리하고 useEffect로 감시하면 입력값이 바뀔 때마다 불필요한 API 호출이 발생합니다.
const [filterCriteria, setFilterCriteria] = useState({
keyword: '',
...
7월 20일 04:30에 게시됨