첫 로드시 동일한 이미지 두번호출

Question

일단 저는 공개/비공개는 제외하고 만들고 있었는데 ImageContext에서 prevDara를 추가한 이후로 첫 로드시에 첫번째 이미지 리스트들을 두번 호출하는데 어떤 방식으로 해결해야 할까요??? 옵저버가 발동 되면 두번째 페이지 리스트들은 한번만 호출이 되는데 첫번째 페이지에 해당되는 이미지들만 두번이 호출되버립니다 ㅠㅠ   깃허브에 임시로 올려두긴 했는데 다른 파일들은 문제가 없어 보이긴 합니다ㅠㅠ useEffect(() => { if(pastImageUrlRef.current === imageUrl) return; setImageLoad(true); axios .get(imageUrl) .then((result) => setImages((prevData) => [...prevData, ...result.data])) .catch((err) => { console.error(err); setImageError(err) }) .finally(() => { setImageLoad(false); pastImageUrlRef.current = imageUrl; }); }, [imageUrl]);

sihoon · Answer

StrictMode 문제로 보이네요! 어느 시점부터 root.render 할 때 컴퍼넌트 트리를 ... 로 감싸기 시작했는데요. 이 경우 개발 모드에서는 하위 컴퍼넌트들의 useEffect 가 두번씩 실행됩니다. 우선 간단한 해결책으로는 StrictMode 를 제거하시면 오류가 없어질거에요. StrictMode 업데이트가 많은 혼란은 일으켰던 업데이트였는데요. 리엑트의 버그라고 주장하던 사람들도 있었습니다. StrictMode 를 도입한 이유는 "버그"를 빨리 찾을 수 있도록 돕기 위함이에요. "effect"가 중복으로 발생해도 문제가 없어야 한다. 중복으로 발생했을 때 문제가 되면 잘못 useEffect를 잘못 사용하는거라는거죠. StrictMode 를 사용하면서 해결하는 간단한 방법은 setImages 를 할 때 필터를 할 수 있는 방법이 있을 것 같아요. 대중적이고 더 좋은 방법으로는 react-query 같은 라이브러리를 이용해서 스테이트를 관리하는 방법도 있어요. 아직 대중적이지는 않지만 개인적으로 가장 좋은 방법은 react-router 6.4버전부터 지원하는 loader, action을 이용하는거에요. 그러면 "컴퍼넌트 밖"에서 이런 데이터 작업을 대부분 처리 할 수 있게 되요. 버그의 주요인인 useEffect도 훨씬 덜 사용하게 되고요