async

Overview

• javascript는 기본적으로 synchronous로 동작하며, asynchronous인 경우는 ajax, event listener, setTimeout 과 같은 함수를 사용할 때이다.
  • ajax는 요청하는 코드들이 순차적으로 실행되지 않고 완료되면 실행된다.

React setState

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

• state 변경함수들은 전부 async로 처리된다. (like a setName)
• 따라서 setName과 같은 함수가 오래 걸리면 다음 코드가 실행될 수 있어, 예상치 못한 문제가 생길 수 있다.

useEffect

• 2 개 이상의 state 변경함수들의 연계가 있을 경우 비동기라 문제가 있을 수 있다.
• useEffect를 잘 작성하면 특정 state 변경 시, useEffect를 실행할 수 있으므로 순차적방식으로 해결할 수 있다.
  • useEffect : 컴포넌트가 재렌더링/랜더링 시 실행되는 함수
  • [] 안의 state가 변경되면 코드를 실행하는 식으로 변경 가능
  • count state 변경 시 age 변경 코드를 만들 수 있다.

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

return ...
  <button onClick={() => { setCount(count+1); }>+</button>

• 첫 페이지 로드 시 useEffect가 실행되는 것을 막기 위해 count != 0 도 조건식으로 추가한다.