[React] useState에 대한 설명과 예시

지난 포스팅에서는 간단하게 리액트 Hook에 대한 전반적이 설명을 했습니다.
이번 포스팅에서는 리액트 훅을 배우면 제일 기본적으로 배우는 useState에 대해서 좀 더 자세하게 알아보겠습니다. 예시와 함께 보도록 하겠습니다.

🎯 useState 예시 분석

useState를 사용하여 할 일 목록을 관리하고 보여주는 코드 예시입니다.

import { useState } from 'react';
import AddTodo from './AddTodo.js';
import TaskList from './TaskList.js';

let nextId = 3;
const initialTodos = [
  { id: 0, title: 'Buy milk', done: true },
  { id: 1, title: 'Eat tacos', done: false },
  { id: 2, title: 'Brew tea', done: false },
];

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

  function handleAddTodo(title) {
    setTodos([
      ...todos,
      {
        id: nextId++,
        title: title,
        done: false
      }
    ]);
  }

  function handleChangeTodo(nextTodo) {
    setTodos(todos.map(t => {
      if (t.id === nextTodo.id) {
        return nextTodo;
      } else {
        return t;
      }
    }));
  }

  function handleDeleteTodo(todoId) {
    setTodos(
      todos.filter(t => t.id !== todoId)
    );
  }

  return (
    <>
      <AddTodo
        onAddTodo={handleAddTodo}
      />
      <TaskList
        todos={todos}
        onChangeTodo={handleChangeTodo}
        onDeleteTodo={handleDeleteTodo}
      />
    </>
  );
}

하나씩 천천히 분석해보겠습니다.

import { useState } from 'react';
import AddTodo from './AddTodo.js';
import TaskList from './TaskList.js';

이 부분은 다 아시겠지만, 리액트 훅인 useState와 컴포넌트인 AddTodo, TaskList를 가져오는 부분입니다.

let nextId = 3;
const initialTodos = [
  { id: 0, title: 'Buy milk', done: true },
  { id: 1, title: 'Eat tacos', done: false },
  { id: 2, title: 'Brew tea', done: false },
];

여기에서 nextId라는 변수는 새로운 할 일을 추가할때 생성되는 id의 값을 담는 변수입니다.
그리고 initialTodos는 기존에 있는 할 일 목록을 보여주는 배열입니다.

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

  // ...

  return (
    <>
      <AddTodo
        onAddTodo={handleAddTodo}
      />
      <TaskList
        todos={todos}
        onChangeTodo={handleChangeTodo}
        onDeleteTodo={handleDeleteTodo}
      />
    </>
  );
}

위의 코드에서 [todos, setTodos] 는 array destructuring을 사용합니다. 초기 상태와 변경할 함수를 구조분해로 담아놓고 useState라는 hook 을 이용하는 것 입니다. 데이터(현재 할 일 목록)를 가져 올 때 todos 를 이용하고 변경할 함수를 동작시킬 때(함수를 사용하여 이 값을 업데이트할 때) setTodos를 사용합니다.

function handleAddTodo(title) {
  setTodos([
    ...todos,
    {
      id: nextId++,
      title: title,
      done: false
    }
  ]);
}

handleAddTodo()를 사용해 새로운 일을 추가할 수 있습니다. 새로운 할 일(객체)을 생성하고 setTodos를 이용하여 현재 할 일 목록에 새로운 할 일을 추가 합니다.

function handleChangeTodo(nextTodo) {
  setTodos(todos.map(t => {
    if (t.id === nextTodo.id) {
      return nextTodo;
    } else {
      return t;
    }
  }));
}

handleChangeTodo()는 특정 할 일의 내용을 수정하기 위해서 사용됩니다. todos 배열을 매핑한 후 변경된 일 목록을 찾고 해당 할 일을 수정된 내용의 할 일로 교체한 후 setTodos를 통해 할 일 목록을 업데이트시켜줍니다.

function handleDeleteTodo(todoId) {
  setTodos(
    todos.filter(t => t.id !== todoId)
  );
}

handleDeleteTodo()은 특정 할 일을 삭제하는 함수입니다. todos 배열에서 삭제할 일을 제외한 나머지 할 일들을 새로운 배열로 생성하고, setTodos를 사용해서 업데이트 시켜줍니다.

대부분 텍스트 필드나 버튼으로 동작할 때 사용하고 있습니다. (단독일 경우 useState를 사용하고 나머지는 useReducer사용) 인풋박스, 체크박스, 검색 박스 등 상황에 따라 사용합니다.
여기에서 주의할 점은 useState 가 같은 동작에 사용할 경우에도 불구하고 계속 남발하지 말아야 한다는 것입니다. 아무래도 리액트 훅을 처음 배울때 가장 먼저 배우는게 useState라서 자주 사용하게 되자먼 익숙해 지고 나서는 다른 Hook도 사용하는 방법으로 발전해 나가야 합니다.

이렇게 리액트 훅 중 가장 먼저 배우는 훅 useState에 대해서 자세하게 알아보았습니다.