[React] state async로 인한 오류 useEffect로 처리

state 업데이트 함수는 비동기식(asynchronous) 함수이다.

 

state를 업데이트를 하고 그 값에 맞춰서 처리하는 함수가 아래에 있을 경우

순서대로 처리가 되지 않아서 오류를 접할 수 있다.

 

예를들어 아래의 코드를 보자.

function Example(){
    let [count, setCount] = useState(0);
    let [data, setData] = useState('2를 만들어 주세요')

    function handleClick() {
        setCount(count+1);
        if(count === 2){
            setData('2 입니다');
        }
    }
    return(
        <div>
            <div>{ data }</div>
            <button onClick={ handleClick }> count :  {count}</button>
        </div>
    )
}

버튼을 클릭하면 count가 하나씩 증가하고

count가 2가 되었을 때 date를 '2 입니다'로 변경하고 싶을 때 위와 같이 적으면 된다고 생각할 수 있다.

 

순서상으로 봤을 땐 count를 1 증가시키고 변경된 값이 2가 되면 date를 변경하게끔 짰으니

제대로 동작 할 것이라고 생각할 수 있겠지만

 

 

위와 같이 2가 되었는데도 불구하고 data가 변경되지 않았다.

 

이유는 비동기식 처리 때문에 state가 변경되기 전에 if문이 처리가 되어버리고

그 이후 count를 3으로 올렸을 때 data가 변경되는 것을 확인할 수 있다.

 

useEffect()를 이용한 오류 해결

function Example(){
    let [count, setCount] = useState(0);
    let [data, setData] = useState('2를 만들어 주세요')

    useEffect(()=>{
        if(count === 2){
            setData('2 입니다');
        }
    },[count])

    return(
        <div>
            <div>{ data }</div>
            <button onClick={ setCount(count+1) }> count :  {count}</button>
        </div>
    )
}

위와 같이 useEffect를 사용하여 count가 '업데이트' 되었을 때 if문을 실행하게 만들어서

제대로 처리되게 만들 수 있다.