리액트 삭제 기능 구현

삭제 기능 구현

리액트에서 삭제 기능을 구현하는 것은 사용자가 특정 데이터를 제거할 수 있게 하는 기능입니다. 이는 CRUD(Create, Read, Update, Delete) 중 'Delete'에 해당합니다. 간단한 할 일 목록(Todo List) 애플리케이션에서 할 일을 삭제하는 기능을 추가하는 방법을 살펴보겠습니다.

1. App 컴포넌트에 삭제 기능 추가

App 컴포넌트에서는 전체 할 일 목록을 관리합니다. 특정 할 일을 삭제하는 removeTodo 함수를 추가하여, 해당 함수를 Todo 컴포넌트에 props로 전달합니다.

import React, { useState } from 'react';
import TodoForm from './TodoForm';
import Todo from './Todo';

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

  const addTodo = todo => {
    if (!todo.text || /^\\\\s*$/.test(todo.text)) {
      return;
    }
    const newTodos = [todo, ...todos];
    setTodos(newTodos);
  };

  const removeTodo = id => {
    const removedArr = [...todos].filter(todo => todo.id !== id);
    setTodos(removedArr);
  };

  const updateTodo = (todoId, newValue) => {
    if (!newValue.text || /^\\\\s*$/.test(newValue.text)) {
      return;
    }
    setTodos(prev => prev.map(item => (item.id === todoId ? newValue : item)));
  };

  return (
    <div>
      <h1>할 일 목록</h1>
      <TodoForm onSubmit={addTodo} />
      <div>
        {todos.map((todo, index) => (
          <Todo
            key={index}
            todo={todo}
            removeTodo={removeTodo}
            updateTodo={updateTodo}
          />
        ))}
      </div>
    </div>
  );
}

export default App;

2. Todo 컴포넌트 수정

Todo 컴포넌트에서는 각 할 일 항목을 표시하고, 삭제 버튼을 포함합니다. 삭제 버튼을 클릭하면 removeTodo 함수가 호출되어 해당 할 일 항목이 목록에서 제거됩니다.

import React from 'react';

function Todo({ todo, removeTodo, updateTodo }) {
  return (
    <div>
      <div key={todo.id}>
        <text>{todo.text}</text>
        <button onClick={() => removeTodo(todo.id)}>삭제</button>
        <button onClick={() => setEdit({ id: todo.id, value: todo.text })}>수정</button>
      </div>
    </div>
  );
}

export default Todo;

3. 전체 흐름

1. 사용자는 할 일 목록 앱에서 할 일을 추가, 수정, 삭제할 수 있습니다.
2. 할 일을 추가하는 addTodo 함수와 수정하는 updateTodo 함수는 이미 구현되어 있습니다.
3. 사용자가 할 일 옆의 '삭제' 버튼을 클릭하면, 해당 할 일은 목록에서 제거됩니다. 이는 removeTodo 함수를 호출하여 구현됩니다.

이 예시를 통해, 리액트에서 상태를 관리하며 사용자 인터페이스를 동적으로 업데이트하는 방법을 이해할 수 있습니다. 삭제 기능은 주로 상태에서 특정 항목을 필터링하여 제외시키는 방식으로 구현됩니다.