Custom Hook을 활용한 상태 관리 예제

06 Nov 2023

reactjs

React의 Custom Hook은 코드의 재사용성을 높이고, 상태 관리를 간편하게 할 수 있는 강력한 기능입니다. 이번 포스트에서는 Custom Hook을 사용하여 간단한 상태 관리 예제를 만들어보겠습니다.

예제 설명

이 예제에서는 Todo 리스트를 관리하는 상태 관리 기능을 구현해보겠습니다. 우리가 만들고자 하는 기능은 다음과 같습니다.

Todo 항목의 추가, 삭제, 완료 여부 변경
Todo 항목의 리스트를 표시

Custom Hook 생성

가장 먼저, 상태 관리를 위한 Custom Hook을 생성해야 합니다. 다음과 같이 useTodoList라는 Custom Hook을 만들어보겠습니다.

import { useState } from 'react';

export const useTodoList = () => {
  const [todos, setTodos] = useState([]);

  const addTodo = (todo) => {
    setTodos([...todos, todo]);
  };

  const deleteTodo = (index) => {
    const updatedTodos = todos.filter((_, i) => i !== index);
    setTodos(updatedTodos);
  };

  const toggleComplete = (index) => {
    const updatedTodos = todos.map((todo, i) => {
      if (i === index) {
        return {
          ...todo,
          completed: !todo.completed,
        };
      }
      return todo;
    });
    setTodos(updatedTodos);
  };

  return [todos, addTodo, deleteTodo, toggleComplete];
};

위 코드에서는 useState를 사용하여 todos 배열을 초기화하고, addTodo, deleteTodo, toggleComplete 함수를 정의하여 상태를 업데이트합니다.

컴포넌트에서 Custom Hook 사용

이제 Custom Hook을 사용하여 Todo 리스트 컴포넌트를 만들어보겠습니다. 다음과 같이 코드를 작성해보세요.

import React from 'react';
import { useTodoList } from './useTodoList';

const TodoList = () => {
  const [todos, addTodo, deleteTodo, toggleComplete] = useTodoList();
  const [newTodo, setNewTodo] = React.useState('');

  const handleAddTodo = () => {
    if (newTodo) {
      addTodo({
        text: newTodo,
        completed: false,
      });
      setNewTodo('');
    }
  };

  const handleDeleteTodo = (index) => {
    deleteTodo(index);
  };

  const handleToggleComplete = (index) => {
    toggleComplete(index);
  };

  return (
    <div>
      <input
        type="text"
        value={newTodo}
        onChange={(e) => setNewTodo(e.target.value)}
      />
      <button onClick={handleAddTodo}>Add Todo</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            <input
              type="checkbox"
              checked={todo.completed}
              onChange={() => handleToggleComplete(index)}
            />
            {todo.text}
            <button onClick={() => handleDeleteTodo(index)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;

위 코드에서는 useTodoList Custom Hook을 가져와서 todos, addTodo, deleteTodo, toggleComplete 변수에 할당합니다. 그리고 이를 이용하여 투두 리스트를 관리하는 로직을 구현했습니다.

컴포넌트 사용

마지막으로, 위에서 작성한 TodoList 컴포넌트를 다른 컴포넌트에서 사용할 수 있습니다. 다음은 예시입니다.

import React from 'react';
import TodoList from './TodoList';

const App = () => {
  return (
    <div>
      <h1>Todo List</h1>
      <TodoList />
    </div>
  );
};

export default App;

위 예제에서는 App 컴포넌트에서 TodoList 컴포넌트를 렌더링하고 있습니다. 이제 애플리케이션을 실행해보면 Todo 리스트를 관리하는 기능을 확인할 수 있습니다.

결론

Custom Hook을 사용하여 React에서 상태 관리를 할 수 있는 간편하고 재사용 가능한 코드를 작성할 수 있습니다. 이를 활용하면 좀 더 효율적인 개발을 할 수 있으며, 코드의 가독성과 유지보수성도 향상됩니다.

예제 설명

Custom Hook 생성

컴포넌트에서 Custom Hook 사용

컴포넌트 사용

결론

#React #CustomHook