[react]useEffect 함수실행시 navigate , console.log is not working

*useEffect 내 함수 미실행 되거나 상태가 업데이트 되지 않을때

 

간혹가다 useEffect에서 console.log가 찍히지 않을 때가 있다. 

이 경우엔 다양한 경우의 수가 있겠지만, 나의 경우엔 비동기 처리가 올바르게 되지 않아서 문제가 발생했다.

console.log 혹은 navgiate, 이외의 다른 함수들을 찍었을때 출력이 되지 않는 경우 useEffect 구문 내에 비동기 함수와 조건문이

포함되었는지 확인해 보면 좋을 듯하다.

내가 원하는 시점에 비동기처리가 들어오지 않아 상태값 혹은 원하는 구문의 console.log가 찍히지 않아 디버깅이 어려울수 있기 때문이다. 왜냐하면 비동기 처리시  기본으로 가지고 있는 state값이 빈배열이거나 빈 string 값일 경우가 많기 때문이다.

 

이와 같은 문제는 하단 코드에서 확인할 수 있다.

이전 오류 실행문에서는 비동기 함수가 console.log나 navigate를 실행하는 구문보다 먼저 작동했기 때문에 아무 출력값도 나오지 않았다. 따라서 useEffect내 조건식을 비동기 우선실행으로 순서를 바꿔주었더니 원하는 부분을 출력할수 있었다. 즉, useEffect 실행시 처음으로 출력 되는 state값이 빈배열 혹인 빈값으로 출력되었기 때문에 if 조건문의 첫번째 필터링에서 부터 걸려버린 것이다.

 

더불어 비동기함수로 불러 오는 결과값이 페이지 내에 return 되는 값(하단에선 user)이 초기상태값이여서 출력되지 않는 경우도 추가적으로 있으므로 이에 해당되는 구문의 state값이 들어와있을때 출력을 할수있도록 삼항조건식을 설정해준다.

   //////////1.이전 오류 실행문
    useEffect(() => {
    if(user === "nouser"){
      console.log(user) // => user가 나오지 않음.. ㅠㅠ
      navigate("/admin/signin")
    }else{
      dispatch(fetchAllUsers());
      dispatch(fetchMainInfo());
    }
  }, [dispatch,navigate]);
  
  return (
  [...]
  	<div>{user}</div>
  [...]
  )
 
 ///////////2.해결된 실행문
 const [userInPage, setUserInPage] = useState(false)
 useEffect(() => {
    //1.비동기 함수가 더 빠르게 작동,따라서 if 문의 순서를 바꾸었더니 작동함.
    if(user !== "nouser"){
      setUserInPage(true)
      dispatch(fetchAllUsers());
      dispatch(fetchMainInfo());
    }else{
      navigate("/admin/signin")
    }
  }, [dispatch,navigate]);
    return (
  [...]
  //2.페이지 리턴값중에 문제가 되는 user를 조건식으로 감싸줌 =>
  //user가 없으면 페이지 내 user가 출력되지 않았음
  	{userInPage &&
  	<div>{user}</div>}
  [...]
  )