useSelector useEffect에서 사용하기

useSelector는 useEffect내에서 사용할 수 없다.

다음과 같은 오류가 발생할 것이다.

"useSelector" cannot be called inside a callback.

그러나 useSelector로 택한 값으로 초기 설정을 하고 싶은 경우가 발생한다.

이럴 때는 어떻게 해야 할까?

 

const selectorData = useSelector(...);
const [data, setData] = useState(selectorData);

useEffect(() => {
  setData(selectorData)
}, [selectorData])

위와 같이 useState를 사용하면 간단히 해결된다. 

 

하지만 이렇게 해도 해결되지 않는 경우가 생긴다.

 

'selectorData'가 'data'의 값으로 들어오는데 딜레이 시간이 발생하면, setData(selectorData)를 하더라도 'data'에 그냥 undefine 값이 들어갈 수 있다.

 

이럴 때는 아래와 같이 해결할 수 있다.

const selectorData = useSelector(...);
const [data, setData] = useState(selectorData);

useEffect(() => {
  setData(selectorData)
}, [selectorData, data])

이렇게 수정하면 초기 실행시 반드시 'data'에 'selectorData'값을 넣을 수 있다.