[React.js] useState()은 동기적으로 작동하지 않습니다.

useState()는 동기적으로 작동하는 함수가 아닙니다.

따라서 setState("...") 했다고 바로 상태값이 변경되지 않습니다!

 

예시와 함께 보도록 하겠습니다.

const [id, setId] = useState("");
const dispatch = useDispatch();

useEffect(()=>{
	axios.get(url)
    	.then((response)=>{
        	setId(response.data[0].id);
            //useState함수들은 한번에 다 같이 렌더링하기 때문에
            //setId 함수보다 밑의 dispatch가 먼저 실행
            //따라서 id는 undefined 혹은 초깃값인 ""이 들어갈 것이고 에러발생 가능성
            dispatch(changeId(id));
            //콘솔 찍어봐도 id를 가져오지 못합니다.
            console.log(id); 
            //...
        })
}, []);

axios를 통해 id값을 받아오고, 리덕스 dispatch를 하는 상황입니다.

데이터를 받아오고 바로 dispatch하는 거니까 전혀 문제없을 거라 생각했습니다.(한참 삽질했습니다...하하)

계속 에러가 뜨고 console.log()로 값을 확인했는데 상태값은 변해 있지도 않고...

 

원인은 useState()의 작동방식입니다.

useState()는 성능을 위해 비동기적으로 일괄 적용됩니다.

만약 useState를 여러 개 사용했다면, 한 번에 상태 값을 변경하고 리렌더링 합니다.

(useState->리렌더링->useState->리렌더링->useState->리렌더링... 이런식이었다면 성능 저하가 크니까 그렇게 만든듯)

 

id에 undefined나 "", null 등등의 값이 들어올 수 있으므로, 이를 대비하는 코드를 따로 작성해야합니다.

ex) if(id !== undefined){...} / {array && array.map(...)}