TanstackQuery - 1. 지나간 옵션도 다시보자 (enabled = boolean)

중요한데,, 자꾸 기억이 안나는 TanstackQuery 옵션을 정리하려고 한다.

enabled !!!!

직전에 포스팅에서도 보면 enabled를 썼었는데 다시 보면서 음,, 어떤 역할이였더라? 생각했다.

너무 당연하게 사용해서 그런가 기억이 잘 안났다.

---

enabled는 useQuery훅에서 쿼리의 자동실행 여부를 제어하는 역할을 한다.

1. enabled: true
   • 동작 방식 : 이 경우 useQuery는 컴포넌트가 마운트될때, 그리고 의존성 배열이 변경될 때 자동으로 queryFn을 실행하여 데이터를 가져온다.
   • 사용 예시 : 페이지에 접속하자마자 사용자 목록이나 게시글 목록을 불러와야 할 때 사용한다.
2. enabled: false
   • 동작 방식 : 이 경우 useQuery훅은 자동으로 queryFn을 실행하지 않고 쿼리를 비활성화 상태로 유지한다. 이 상태에서는 data는 undefined이고 inPending은 true가 된다.
   • 사용 예시 : 사용자가 '검색'버튼을 클릭하거나 '결제'가 완료되는것처럼, 특정 사용자 행동이 일어난 후에만 데이터를 가져와야 할때 사용하거나 아니면 데이터를 가져오는 데 필요한 변수가 아직 준비되지 않았을때 사용한다.

---

그래서 보통은 어떻게 제어하나요?

이름하야 < 쿼리 키 변경 방식 > !

1. 변경할 상태 변수 추가

const [optionState, setOptionState] = useState(false) ;

2. 쿼리 키에 상태 변수 추가

const {data} = useQuery({
querykey: ["dontionReward", optionState],
queryFn : fetchDontionReward,
enabled : optionState,
});

3. 특정 시점에 상태 변경

useEffect({
	setOptionState(true);
},[결제_성공_상태);

자 오늘은 Tanstack Query의 많은 옵션중 하나인 enabled에 대해서 설명하고 사용예시를 살펴보았습니다 ! 또 유용한 포스팅으로 찾아올게요 ~~!