목록2025/01/09 (1)

뭉균의 개발일지

[React] React로 Debounce 적용하기

🚪들어가며   위의 사진은 검색어를 입력하면 그 검색어가 포함된 문자만 필터되도록 설정한 컴포넌트입니다. "가나다라"를 검색할 때, 검색어의 상태인 search가 어떻게 변하는지 보겠습니다.   그런데, 꼭 이렇게 한글자 한글자마다 상태를 변화시킬 필요가 있는지 의문이 들었습니다. 위의 예시는 간단하기 때문에 성능 상 큰 문제가 없을 것입니다. 하지만, 만약 저렇게 상태가 변화할 때마다 API 요청을 보내는 상황이라면 성능에 큰 문제가 생길 것입니다. 이럴 때, Debounce 개념을 통해 성능을 개선할 수 있습니다.   📗 디바운스 (Debounce)란?디바운스는 짧은 시간 동안 여러 번 발생하는 이벤트를 하나로 합쳐서 처리하는 기술입니다. 주로 사용자 입력, 창 크기 조정, 스크롤 이벤트와 같은 ..
React 2025. 1. 9. 19:56
이전 Prev 1 Next 다음