setState의 Callback 함수를 사용하는 경우

setState에 Callback 함수를 사용하는 경우는 state를 변경 후 변경된 state를 사용하는 경우이다.

	const finishHandler = (todoId) => {
		setTodo((prevTodo) => {
			const updateTodo = prevTodo.map((todo) =>
				todo.id === todoId ? { ...todo, isDone: !todo.isDone } : todo
			);
			return updateTodo;
		});
	};

위와 같은 간단한 함수가 있다고 하자.
setState안 콜백함수의 역할은 map 함수를 돌면서 todo.id와 매개변수로 받은 todoId가 일치할 경우 isDone의 상태를 바꾸는 역할이다.
콜백함수의 매개변수는 이전상태의 변경되기 이전 시점의 state를 가지고 있다.

setState에서 발생할 수 있는 문제점

twiceButtonClick = () => {
    this.setState({ num: this.state.num * 2 });
    console.log("state : " + this.state.num);
  };

위 함수는 값을 받아 2배로 변경후 콘솔에 출력하는 것이다.
함수를 실행하면 콘솔에 변경되기 전 값이 나온다.

setState는 비동기 함수이다.
setState 함수는 이벤트 핸들러에서 값이 변경되는 것이 아니라, 이벤트 핸들러 함수가 종료 된 후 react에 의해 값이 갱신된다.
따라서 Callback 함수를 사용하여 값 변경이 수행이 완료 될 때 까지 기다린 후 다음 단계를 실행할 수 있다.