setState()의 인수로 callback 함수를 사용하는 이유는?

*setState() 메서드는 상태 업데이트가 완료된 후에 원하는 작업을 수행 하고 싶을 때 callback 함수를 사용하면됩니다.*

예를 들어, 상태가 변경되었을 때 로그를 남기고 싶다면 setState() 메서드의 두 번째 인수로 callback 함수를 전달하면 됩니다. 이 callback 함수는 setState() 함수가 완료된 후에 실행됩니다.

setState({ name: 'John' }, () => console.log('updated and component re-rendered'));

setState() 메서드는 비동기적으로 작동하기 때문에, 상태(state) 업데이트가 완료되고 컴포넌트가 렌더링된 후에 callback 함수가 호출됩니다.

<aside> 💡 함수형 컴포넌트에서 setState()의 인수로 callback 함수를 사용하는 이유

• setState()가 순차적으로 실행될 때 이전 state 값을 가지고 처리가 되기 때문에 정확성을 유지하면서 값을 업데이트 시킬 수 있기 때문이다.
• setState() 함수는 비동기적으로 동작한다.

const [state, setState] = useState(0);
const upState = () => {
    setState(state => state + 1); 
    console.log('1: ', state)
    setState(state => state + 1);
    console.log('2: ', state)
    setState(state => state + 1);
    console.log('3: ', state)
  };
// [비동기적으로 동작]
// 1: 0
// 2: 0
// 3: 0

// [정확성 유지]
// state: 3

</aside>