다음으로 App 컴포넌트의 useState 하단에 다음과 같이 useEffect를 사용해보세요.

App.js - App 컴포넌트

function App() {
  const today = new Date();

  const [todos, setTodos] = useState([
    {id: 1, text: '작업환경 설정', done: true},
    {id: 2, text: '리액트 네이티브 기초 공부', done: false},
    {id: 3, text: '투두리스트 만들어보기', done: false},
  ]);

  useEffect(() => {
    console.log(todos);
  }, [todos]);

  (...)

useEffect의 첫 번째 인자에는 주시하고 싶은 값이 바뀌었을 때 호출하고 싶은 함수를 넣습니다. 두 번째 인자에는 주시하고 싶은 값을 배열 안에 넣습니다.

코드를 저장하고 시뮬레이터에서 각 항목들을 체크해보세요. 콘솔에 다음과 같이 현재 todos 배열이 출력되고 있나요?

[{"done": true, "id": 1, "text": "작업환경 설정"}, {"done": false, "id": 2, "text": "리액트 네이티브 기초 공부"}, {"done": false, "id": 3, "text": "투두리스트 만들어보기"}]
[{"done": true, "id": 1, "text": "작업환경 설정"}, {"done": true, "id": 2, "text": "리액트 네이티브 기초 공부"}, {"done": false, "id": 3, "text": "투두리스트 만들어보기"}]

useEffect에 등록한 함수는 두 번째 인자의 배열 안에 넣은 값이 바뀔 때도 호출되지만, 컴포넌트가 가장 처음 렌더링됐을 때도 호출됩니다.