"제 enabled가 무시당했습니다만??” 분명히 enabled: false를 걸어놨는데, refetch()를 부르니 API가 호출된다. "어? 나 비활성화한 것 같은데 왜 동작해?"라고 당황했다면 축하한다. 지극히 정상이다. 오늘은 이에 대해 알아보자. enabled와 refetch의 관계보통 특정 데이터가 준비 안 됐을 때 API 자동 호출을 막으려고 enabled: false 옵션을 쓴다. 그런데 이 상태에서도 useQuery에서 꺼낸 refetch()를 직접 실행하면? 설정값을 무시하고 무조건 요청이 발생한다.결론부터 말하자면, 이건 버그가 아니라 리액트 쿼리의 설계이다. 원인: "자동"과 "수동"의 명확한 선 긋기이건 라이브러리 설계팀의 의도된 동작(Expected behavior)이다.자..

React Query에서 `queryFn`에서 언랩(unwrapping) 하는 것과 `select` 옵션으로 언랩하는 것의 차이를 정리합니다. 언랩(unwrapping)이란?"언랩(unwrapping)"은 일반적으로 감싸여 있거나 포장된 데이터를 풀어내어 원하는 실제 값이나 내용을 추출하는 과정을 말한다.React Query나 API 호출에서 언랩은 보통 API 응답 객체 내 여러 계층 중 실제 필요한 데이터 부분만 꺼내서 사용하는 것을 의미한다. 언랩(unwrapping)의 의미예를 들어, API 응답이 다음과 같이 복잡한 구조일 때:{ "status": "success", "data": { "user": { "id": 1, "name": "Alice" } }, "message": "OK"..

JavaScript 객체 초기화 순서와 const 객체 참조 구조 때문에 생기는 “실행 시점 의존성” 문제객체 리터럴 내부에서 자기 자신 참조는 시점상 정의 전 참조가 된다. export const pageMngQueryKeys = { all: ['pageMng'] as const, detail: (id: number) => [...pageMngQueryKeys.all, 'detail', id] as const,};여기서 pageMngQueryKeys.detail은 객체 초기화가 아직 끝나지 않은 시점에 pageMngQueryKeys.all을 참조 즉, pageMngQueryKeys는 아직 완전히 만들어지지 않았는데 그걸 내부에서 쓰고 있음 → undefined.all → 런타임 에러 왜 로컬환..