API 요청을 최소화해서 검색 기능 최적화 하는 방법 : Debounce / Throttling / react-query의 성능 비교

[lucy726j]

• 현황 분석 : 개발자 도구로

• 문제점 (정량적으로 제시)

  1. 검색 결과 렌더링 속도
  2. onChange로 값이 변할 때마다 API 요청이 발생 : 요청 횟수

• API 요청 최소화 및 렌더링 최적화를 위한 방법

1. Debouncing과 Throttling

• Debounce?
• Trottling?
• (Rodash 라이브러리 / 커스텀 훅)
• 기존과 코드 비교 : 적용한 내용 / 동작 방식
• 기존과 성능 비교 : 기존 현황 분석과 비교

2. React-query

• 리액트 쿼리란?
• useQuery refetch?
• 기존과 코드 비교 : 적용한 내용 / 동작 방식
• 기존과 성능 비교 : 기존 현황 분석과 비교

4. 총 정리

• 개발자 도구 분석
• 각각 방식의 장단점 : 언제 사용하면 좋을지