동기 비동기 리마인드

자바스크립트의 sync / async 관련 상식

자바스크립트는 일반적인 코드를 작성하면 synchronous하게 처리됨 (==동기방식)
=>코드를 작성한 순서대로 윗줄부터 차례대로 코드가 실행

console.log(1+1)
console.log(2+2)
console.log(3+3)

하면 콘솔창에 2 4 6순서로 출력

자바스크립트에서 비동기적으로 실행되는 코드

axynchronous하게 실행되는 코드(==비동기적으로)
=>ajax , 이벤트리스너, setTimeout과 같은 함수들을 쓸 때
해당 함수들은 처리시간이 오래걸리기 때문에 순차적으로 실행되지않고 완료되면 실행

console.log(1+1)
axios로 get하고 성공하면 console.log(2+2)
console.log(3+3)

위의 코드의 경우 2 6 출력하고 4출력됨

리액트의 setState함수 특징

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

위와 같은 state의 state변경함수를 사용하게되면 전부 비동기적으로 처리됨
여기에서 비동기적으로 되는 처리때문에 예상치못한 문제가 생길 수 있음

리액트 state변경함수 비동기의 예시

<button onClick={()=>{

  setCount(count+1);
  if ( count < 3 ) {
    setAge(age+1);
  }
         
}}>나이 + 1버튼</button> 

위의 코드에서 count의 값이 2일때까지만 age를 +1해주는 코드인데
값은 count가 3일때도 +1을 해줌

=>이유는 비동기적으로 처리되기 때문임

state변경함수는 비동기적으로 처리되는 함수이기 때문에 제쳐두고 다음코드를 실행해줌

비동기 해결방법

① 버튼을 세번째 누르면 setCount(count+1); 이걸 실행해서 count를 3을 만들어줘야함

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

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

위와같이 state1을 변경하고나서 state2를 변경한느 코드를 작성할때 가끔 문제가 발생함
=> 해결방법 : 동기적으로(순차적으로) 실행하고 싶을떄는 useEffect사용
useEffect를 특정 state가 변경될때 실행하도록 코드를 짜면됨

useEffect(()=>{
  if ( count != 0 && count < 3 ) {
    setAge(age+1)
  }
 }, [count]) 

<button onClick={()=>{

  setCount(count+1);

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

위의 코드처럼 작성
문제는 useEffect가 처음 페이지 로드될 때도 한번 실행이 되기 때문에 의도치 않은 버그가 발생할 수 있음
처음 페이지 로드시 useEffect 실행을 막는 코드를 작성하거나 count가 0일때는 내부코드가 동작하지않도록작성