[코딩애플;React] state 변경함수 사용할 때 주의점 : async

보통 자바스크립트는 동기방식으로 코드를 적은 순서대로 코드가 실행됨.

 

ajax,이벤트리스터,setTimeout 함수 같은 것을 사용할 때 비동기가 됨

->처리시간이 오래걸림 -> 순차적 처리가 아닌 완료되면 실행 됨

 

리액트의 setState 함수 특징

function App(){

    let [name, setName] = useState('kim')

  }

 

여기서 setName과 같은 변경 함수들은 비동기적으로 처리됨. 이 함수 실행이 오래걸리면 다른 코드부터 실행,

 

ex)버튼 누르면 2개의 기능을 순차적으로 실행하고 싶을 때

function App(){

  let [count, setCount] = useState(0);

  let [age, setAge] = useState(20);

  return (

    <div>

      <div>안녕하십니까 전 {age}</div>

      <button>누르면한살먹기</button>

    </div>

  )

}

-count와 age는 1씩 더하고 count가 3 이상이면 그만 더하라고 알람뜨게 하기

 

<button onClick={()=>{

setCount(count+1);

if ( count < 3 ) {

  setAge(age+1);

}

       

}}>누르면한살먹기</button>

 

하지만 23까지 증가함 . count가 3일 때도 age +1를 해주고 있다.

->이유는 async 특징 떄문. state변경함수는 비동기적으로 처리되는 함수이므로 완료되기 까지 시간이 오래걸리면 다음 코드를 실행함

① 버튼을 세번째 누르면 setCount(count+1); 이걸 실행해서 count를 

② 근데 count를 3으로 만드는건 오래걸리니까 제껴두고 if ( count > 3 ) {} 이걸 실행

③ 이 때 count는 아직 2라서 if문 안의 setAge(age+1)이 동작

 

해결하는 방법은 동기적으로 처리하는 것 : useEffect써서 특정 state가 변경될 때 실행하도록.

useEffect(()=>{

    if ( count != 0 && count < 3 ) {

      setAge(age+1)

    }

   }, [count])