useEffect 투두리스트 setState이전상태 오류

Todolist앱을 만드는 과정에서 초기 데이터를 넣으려고 useEffect를 사용하여 코드를 작성하였다.

const addTodo = (newinputTodo) => {
    setTodos([...todos, newinputTodo]);
  };
  
useEffect(() => {
    addTodo("헬스");
    addTodo("양치하기");
    addTodo("밥먹기");
  }, []);

하지만 이상하게 화면에는 "밥먹기" 데이터밖에 나오지 않았다. 그 이유는 addTodo함수에 있는데 addTodo함수는 useEffect안에서 독립적으로 실행되기 때문에 이전 호출 상태의 변경결과를 반영하지 않는다. 따라서 "헬스"를 넣었다가 그거로 끝, "양치", "밥먹기"도 순서대로 집어넣기만 하고 마지막 "밥먹기"만 나오는 것이다.

해결방법

addTodo안에 setTodos 함수를 안에 콜백함수를 사용하여 인자로 그 값을 넣으면 React가 이전 상태를 보장해 이전 상태 값을 안전하게 참조할 수 있게 한다. (콜백함수 자체에 그런 기능이 있는게 아니라 React의 setState 함수가 콜백 함수를 지원하며 이를 통해 이전 상태를 안전하게 보장하는 것이다.)

따라서 이렇게 수정한다.

const addTodo = (newinputTodo) => {
    setTodos((todos) => [...todos, newinputTodo]);
  };