yunkogong

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

1️⃣ 목적리액트에서 useEffect는 컴포넌트 생명주기(Lifecycle)를 다루는 핵심 훅입니다.특히 **마운트(Mount)**와 언마운트(Unmount) 시점에서 실행되는 로직을 올바르게 이해하면, 메모리 누수를 방지하고 깔끔한 코드 관리가 가능합니다.✅ 2. useEffect 기본 구조useEffect(() => { // ✅ 마운트(Mount) 시 실행되는 영역 return () => { // ✅ 언마운트(Unmount) 시 실행되는 영역 (cleanup 함수) };}, []);[]: 의존성 배열 (Dependency Array)→ 빈 배열이면 마운트 시 1회만 실행됩니다.✅ 3. 마운트(Mount)란?컴포넌트가 처음 화면에 나타날 때 실행주로 초기화 작업 (API 호출, 이벤트 등록..