🌷나의 선인장🌵

react-query에서 query를 refetch할 때 status가 idle부터 뜨는게 아니라 success부터 뜨는 경우.. 왜그럴까?? (status뿐만 아니라 isLoading이나 isFetching과 같은 상태도 true부터 시작하는게 아니라 false로 뜬다.) refetchOnMount: true, keepPreviousData: false 로 다 설정했는데도 말이다. 해당 상황 재현 useQuery를 사용하여 data fetch any event에 의해 해당 data 다시 refetch 콘솔에 로그 찍어봤을때 data의 status: success 부터 시작 (아래 콘솔 캡쳐 사진에서 맨 마지막 줄만 뜸) 내가 예상했던 behavior : status: idle부터 시작해서 idle ->..

javascript, typescript를 사용하다보면 모듈을 많이 만들게 되고 그때마다 파일 하단에는 "export default ~" 혹은 "export const ~" 등의 export 문법을 사용하게 된다. 이글은 무지성으로 export 하는 것을 막기 위한 글이다. export에는 default export와 named export가 있다 1. default export - 파일당 최대 1개의 default export가 있을 수 있음 - 보통 파일 내에서 한개만 export할 때 vs 대표로 export할 것이 있을 때 많이 사용 - 해당 모듈에는 개체가 하나만 있다는 사실을 의미 - import할 때 중괄호{} 없이 가져올 수 있음 - 위와 같이 export할 경우 import할 때 아무 이..

useEffect를 사용하다보면, dependency에 빈 배열을 넣는 경우도, 일부 state값들을 넣기도하고, 혹은 dependency를 생략하기도 한다. 이 셋의 차이를 알고자 한다. 먼저 dependency를 아예 생략하는 경우이다. useEffect(() => {}); dependency가 없기 때문에 제일 처음 렌더링 할 때 한번 불리고, 그 뒤로 어떤 작은 state들이나 요소들이 변화할 때마다 계속 불린다. 즉, 불필요한 콜이 많아진다. (위 형태는 거의 사용하지 않는다) 다음은 dependency로 빈 배열이 들어가는 경우이다. useEffect(() => { },[]); 렌더링 후에 딱 한 번만 실행시키고 싶을 때 위와 같이 작성한다. 마지막으로 배열에 변수들을 넣는 경우이다. cons..