필터가 여러개 있는 검색 기능을 수정하던 중 문제를 발견했다.
검색하기 버튼을 누르니
api 요청을 두번 따닥!
.
문제가 뭘까 소스 코드를 계속 봤다. 이거저거 고쳐봐도 모르겠다.
이럴때 드는 생각이 이런 문제는 원인을 어떻게 명확하게 추측할 수 있지? 였다.
차라리 에러메세지가 뜨면 뭐 때문에 에러가 난건지 추적이 가능한데.
이런 경우는 에러가 나는것도 아니고... 내가 하나하나 콘솔을 찍어보면서 추척하거나 코드를 뜯어 보고 유추 해보는 수 밖에는 없는게 너무 답답했다. 왜냐?? 아무리 봐도 모르겠기 때무네!!!!!
그래서 커서를 붙들고 하루종일 잡도리를 했더니
죙일 헛소리만 하다가 오후 느즈막히 뭔가 그럴싸한 답변을 내놨다.
react-query의 enable 옵션이 !!param 으로 되어있기 때문에
1. param 변경시 자동으로 한번 호출
2. useEffect 의존성에 포함된 param 으로 한번 더 호출
이렇게 총 두번 호출이라는것.
* useQuery의 enabled 옵션 특
- useQuery는 GET 요청 특화 메소드로, 기본적으로 컴포넌트가 렌더링 될때 자동호출이다 .
- enabled 는 디폴트 설정이 true이고, true 이면 useQuery 자동호출 하라는 뜻이다.
- 하지만 자동 실행되는걸 막아주고 싶어 + 내가 원하는 시점에 호출하고싶어 => 이럴때 사용하면 좋다.
(enabled : false + refetch 수동 호출)
- enabled : !!param 이런식으로 특정 값을 설정해주면, param값이 없을때는 자동호출 안해주다가, param 값이 일단 한번 들어오면 그 뒤로는 자동호출을 해주는 구조다
그래서 한번 수정을 해봤따.
enabled : false 로 주면 끝.
처음에 컴포넌트 마운트시에는 어차피 useEffect 의존성이 있기 때문에.. 그냥 두면 된다.
잘된다. ㅠ