[React] async

synchronous / asynchronous 

• 자바스크립트는 일반적인 코드를 작성하면 synchronous 동기식 처리.
  - 코드를 적은 순서대로 위에서 밑으로 한줄 씩 실행
• AJAX, 이벤트리스너, setTimeout 이런 함수들을 사용하면 asynchronous 비동기식 처리.
  - 이런 함수들은 처리시간이 오래걸림.

 

 

EX ) 

console.log(1+1) // 실행순서 1
axios로 get요청하고나서 console.log(1+2) 실행해주세요 // 실행순서 3
console.log(1+3) // 실행순서 2

• 2 4가 출력된 뒤 3 출력. 3을 출력하는 코드가 비동기 처리라서, 3을 출력하는 코드가 0.00초라도 물리적으로 잠깐 처리가 되어 보류되기때문에 실행 순서가 뒤로 밀림

 

 

리액트의 setState 함수 특징

function App(){
  let [name, setName] = useState('kim')
}

• setName을 사용해서 name이란 state를 변경 가능 ex) sestName('Park') 

 

EX ) 버튼을 누르면 2개 기능을 순차적으로 실행

 

  - 버튼을 누를 때마다

1. count라는 state를 +1 (버튼누른 횟수 기록용)
2. age라는 state도 +1 
3. 근데 count 가 3 이상이면 더 이상 age라는 state를 1 더하지 말도록 함

function App(){
  let [count, setCount] = useState(0);
  let [age, setAge] = useState(20);

  return (
    <div>
      <div>안녕하십니까 전 {age}</div>
      <button>누르면한살먹기</button>
    </div>
  )

}

<button onClick={()=>{

  setCount(count+1);
  if ( count < 3 ) {
    setAge(age+1);
  }
         
}}>클릭시 + 1</button>

  ❗ 실행시 count가 23이 됨

 

이유: state 변경함수는 비동기식 처리를 하는 함수라서

1. 버튼을 세번 눌렀을 때 setCount(count +1); 코드가 count를3으로 만들어주는데, 이걸 먼저 실행하지 않고 오래걸린다고 미뤄둠.
2. 그 다음 코드부터 실행. if (count < 3) 근데 1에서 코드를 건너 뛰어서 counnt는 아직 2라서
3. setAge(age+1)가 실행 되고, age = 23
4. 미뤄뒀던 코드를 실행해서 count = 3

 

• -> state1을 변경한 뒤에 state2를 변경하는 코드는 문제가 발생하기 쉬움
• => 동기처리처럼 순차적으로 실행하고 싶을 때 useEffect 사용하기

 

* useEffect : 특정 state가 변경될 때 useEffect를 실행할 수 있음. 컴포넌트가 렌더링/재렌더링 될 때 실행되는 함수

 

 

✅ 변경한 코드

<button onClick={()=>{

  setCount(count+1);

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

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

 

• 이렇게 짜면 useEffect는 count라는 state가 변경되고나서 실행됨
• ❗ 그렇지만 페이지가 처음 로드 될 때도 실행 되게 때문에 버그 발생 가능

 

 

 

✅ count가 0일 때는 (페이지가 처음 로드되었을 때는) 내부 코드를 동작x

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

 

 

💡  count와 age를 동시에 한 곳의 state에 array/object자료형으로 집어넣어거나 

💡 하나는 굳이 state로 만들지 않고 일반 var 변수로 만드는 것도 쉽게 해결할 수도 있을 것 같음