스케줄을 가져올 시 두 번 요청

 

안녕하세요. 프론트 쪽의 김승주입니다. 저는 Main페이지를 담당하여 작업을 하였습니다.

 

useEffect를 이용하여 처음 랜더링이 될 시 스케줄을 가져와 화면에 띄워주게 했습니다. 하지만 이때  불필요한 데이터 요청을 한다는 사실을 알게 되었습니다.

 

문제의 코드입니다.

const Main = () => {  
(...)
useEffect(() => {     const userId = window.localStorage.getItem("userId");    
const getnickName = window.localStorage.getItem("nickname");    
const getprofilImg = window.localStorage.getItem("profileImage");    
const getEmail = window.localStorage.getItem("email");    
if (getnickName && getEmail) {      
setNickname(() => getnickName);      
setEmail(() => getEmail);      
if (getprofilImg) {         setProfileImg(getprofilImg);       }      
dispatch(__getSchedule(userId));    
} else {       navigate(`/login`);     }   },
[navigate, dispatch,email]);
(...) }

해당 코드는 localStorage에 있는 아이템들이 있을 시에 데이터를 요청하여 스케줄을 띄워주는 코드입니다.

 __getSchedule이 2번 반복합니다. 

 

useEffect는 리액트 컴포넌트가 랜더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 reactHook입니다. 의존성 배열의 상태가 변할 때 useEffect내의 식을 실행합니다. 

 

2번 호출이 된다는 것은 의존성 배열이 잘못되었다는 것을 파악하여 하나씩 확인해 본 결과 email의 상태가 중간에 변한다는 것을 발견했습니다.

 

const Main = () => {  
(...)
useEffect(() => {     const userId = window.localStorage.getItem("userId");    
const getnickName = window.localStorage.getItem("nickname");    
const getprofilImg = window.localStorage.getItem("profileImage");    
const getEmail = window.localStorage.getItem("email");    
if (getnickName && getEmail) {      
setNickname(() => getnickName);      
setEmail(() => getEmail);      
if (getprofilImg) {         setProfileImg(getprofilImg);       }      
dispatch(__getSchedule(userId));    
} else {       navigate(`/login`);     }   },
[navigate, dispatch]);
(...) }

의존성 배열에서 email을 삭제 시킨 후 실행을 하니까 의도했던 대로 첫 렌더링 시 한 번만 불러오는 것을 확인했습니다.