[Expo-TodoList] state 추가하기

이번 시간에는 훅(hook)을 이용하여 함수형 컴포넌트에서 state 값을 관리하려한다.

todos라는 속성으로 상태를 정의해서
할 일 목록의 상태를 관리하려 한다.
todos 객체는 아래와 같이 세 가지 속성값을 가진다.

todos:
{ id: Number, textValue: string, checked: boolean }

id: 각 목록의 고유 아이디
textValue: 목록 내용
checked: 완료 여부(true/false)

---

#1 useState import하기

App.js

import React, { useState } from 'react';

export default function App() {
  const [todos, setTodos] = useState([]);

  return (
      .
      .
      .
  );
}

---

const [todos, setTodos] = useState([]);

useState hook은 인자로 초기 상태값을 받는다.
number, string, array 등이 인자값으로 들어갈 수 있다.

지금은 할 일 목록 객체를 담을 배열이 필요하기 때문에,
빈 배열([])을 인자값으로 넣어주었다.

useState hook은 배열에 두 개의 값을 넣어 반환한다.

첫 번째 요소는 상태값으로,
함수 호출 시 입력한 인수가 초기값으로 사용된다.

두 번째 요소는 상태값을 변경할 수 있는 함수다.
todos는 할 일 목록의 현재 상태를 나타내며,
setTodos는 todos를 업데이트 해주는 함수다.