[React] useSelector, useState 사용 이슈

말머리

useSelector와 useState를 병행하여 사용할 경우, store의 값이 정상적으로 반영되지 않는 문제가 있었다.
무자비한 구글링 및 삽질을 끝으로 해결하여, 그 방법을 작성한다.

실행 순서

useState -> useSelector

useState는 렌더링되기 전에 실행.
useSelector는 렌더링된 후에 실행.

따라서, 상황은 아래와 같다.

1. dispatch진행, store값 변경.
2. useSelector로 store값을 받아 useState에 전달.
3. 변경 값이 있는 컴포넌트에 리렌더링 진행.
4. 하지만 useState가 먼저 진행되고 useSelector가 진행됨.
5. 따라서, 정삭적이지 못한 상태값을 받음.

해결

useEfflect

function containerComponent() {
	const storeState = useSelector((state:RootState)=> state.store);
  
  	const [useState, setUseState] = useState(false);
  
  	useEffect(()=> {
      setUseState(storeState)
    },[storeState])
}

useState는 렌더링 전에 실행되므로, useEffect를 통해 받았다.

끝.