[React] Hooks - useState

useState

import {useState} from "React'

const [state, setState] = useState(initialState);

useState 가 반환한 배열을 구조분해로 풀이한 것.
useState는 state 변수와 이 변수를 갱신할 수 있는 함수를 반환한다.

initialState : state의 초기값
setState : state를 갱신할 수 있는 함수
State : setState 를 받아 쌓이는 곳, 객체타입일 경우 불변성 유지!

const App = () => {
  const [todolist, setTodoList] = useState([]);
  const [title, setTitle] = useState("");
  const [list, setList] = useState("");
  const addTodo = () => {
    const newTodo = {
      id: todolist.length + 1,
      title: title,
      list: list,
      isDone: false,
    };
  setTodoList([...todolist, newTodo]);
};

위 코드를 보면 const 구조분해로 배열을 useState 에 각각 할당 하였고
newTodo 의 객체타입의 데이터를 todolist 에 인가하였다.

데이터가 쌓여가는 구조이기 때문에
setTodoList 인자에 비구조화 할당을 사용하여 객체를 나열하고 뒤에 새로운 newTodo 를 추가해주어 새로운 todoList를 반환한다.