yunkogong

환경: React + TypeScript / 데이터 페칭 + 페이지네이션 화면들어가며리스트 + 필터 + 페이지네이션이 있는 화면을 useEffect + useState로 만들다 보면, 어느 순간 컴포넌트가 "API 호출 + 상태 동기화 + 로딩/에러 관리 + 의존성 추적"을 한꺼번에 떠안게 됩니다. 기능이 늘수록 useEffect가 늘고, 의존성 배열을 잘못 건드려 무한 호출이 나기도 하죠.이번에 같은 화면을 React Query(TanStack Query) 로 옮기면서 코드가 어떻게 단순해졌는지 정리했습니다.1. 기존 구조 — useEffect로 호출, useState로 보관useEffect(() => { const params = { keyword, sort, page, size: 10 }; fe..

1️⃣ setState의 두 가지 사용법setState(newValue); // 직접 대입setState(prev => updatedValue); // 함수형 업데이트함수형 업데이트는 이전 상태에 의존하는 변경에서 안전하다. 클로저 함정과 배치 업데이트 이슈를 모두 피할 수 있다.2️⃣ 왜 함수형 업데이트인가같은 핸들러에서 상태를 연속으로 갱신할 때 차이가 드러난다.// ❌ 직접 대입 — count는 이 렌더 시점 값으로 고정(클로저)setCount(count + 1);setCount(count + 1);setCount(count + 1);// 결과: +1 (세 번 모두 같은 count를 참조)// ✅ 함수형 — 항상 직전 결과를 받아 누적setCount(prev => prev ..