[React] useSelect와 usestate 사용 시 state 변경이 안되는 현상

useselect를 통해 list를 가져와서 화면에 뿌려주는 기능을 구현하는 중에 발생한 현상이다.

useselect는 컴포넌트가 랜더링되고 난 후에 실행된다. 따라서 랜더링 과정에서 실행되는 useState로 선언한 list에는 undefind가 된다.

 

해결방법

useselect는 hook이기에 useEffect 안에서 동작할 수 없다. 그렇기에 useselect의 실행 시점을 고려해서 list state를 업데이트 해준다. useEffect의 디펜던시로 useSelect를 통해 가져온 값을 설정하는 방식으로 해결하였다.

 

다음과 같은 순서로 동작하게 된다.

초기 랜더링 완료(이때 state는 undefind) → useSelect 실행 → store에서 list를 가져온다. → useEffect 의존성 발현 → useEffect안에서 setState실행 → 컴포넌트 리랜더링 → state변경 → 원하는 state값 화면에 출력 순이 된다.

참고로 state가 실제적으로 새로운 값으로 치환되는 시점은 ‘리랜더링이 된 후’ 이다.

const getList = useSelector((state) =>
    state.lists.find((list) => list.id == id)
  );

const [list, setlist] = useState(null);

useEffect(() => {
  setlist(getList);
}, [getList]);

 

참고한 글

https://velog.io/@ahn0min/useSelector-useState-를-같이-사용하며-생긴-문제점

https://medium.com/hcleedev/web-usestate의-동작-원리와-함정-7b4825c16b9