[React 리액트] useState

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

상태 유지 값과 그 값을 갱신하는 함수를 반환합니다.

 

최초로 렌더링을 하는 동안, 반환된 state(state)는 첫 번째 전달된 인자(initialState)의 값과 같습니다.

 

setState 함수는 state를 갱신할 때 사용합니다. 새 state 값을 받아 컴포넌트 리렌더링을 큐에 등록합니다.

setState(newState);

다음 리렌더링 시에 useState를 통해 반환받은 첫 번째 값은 항상 갱신된 최신 state가 됩니다.

 

출처: https://ko.reactjs.org/docs/hooks-reference.html#usestate

Hooks API Reference – React

---

- To Do List 만들기

const [todoList, setTodoList] = useState([]);

state: todoList

현재 상태

setState: setTodoList

갱신할 상태

useState([])

최초로 렌더링 하는 동안 첫 번째로 전달된 인자 [] <- 빈배열

 

todo를 전달받을 함수

  function insertTodo(todo) { // todo를 전달받을 함수
    todo.idx = todoList.length; // todo의 idx(인덱스)는 todoList의 길이를 저장

    const newTodoList = [...todoList, todo]; // Spread Operator를 사용하여 todoList를 복사하여 새로운 todoList를 생성
    setTodoList(newTodoList); // todoList를 새로운 todoList로 설정(새로운 todoList를 설정하면 새로운 todoList가 반영됨)
  }