리액트 수정 기능 구현

수정 기능 구현

리액트에서 수정 기능을 구현하는 것은, 사용자가 이미 입력한 데이터를 변경할 수 있게 해주는 기능입니다. 이 기능은 CRUD(Create, Read, Update, Delete) 중 'Update'에 해당합니다. 간단한 예시로, 위에서 만든 할 일 목록(Todo List) 애플리케이션에 할 일을 수정하는 기능을 추가해보겠습니다.

1. Todo 컴포넌트 추가

먼저, 각 할 일 항목을 나타내는 Todo 컴포넌트를 만들고, 수정 모드를 관리할 수 있는 상태를 추가합니다.

import React, { useState } from 'react';

function Todo({ todo, completeTodo, removeTodo, updateTodo }) {
  const [edit, setEdit] = useState({
    id: null,
    value: ''
  });

  const submitUpdate = value => {
    updateTodo(edit.id, value);
    setEdit({
      id: null,
      value: ''
    });
  };

  if (edit.id) {
    return <TodoForm edit={edit} onSubmit={submitUpdate} />;
  }

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

export default Todo;

2. App 컴포넌트 수정

App 컴포넌트에 updateTodo 함수를 추가하여, 특정 할 일을 수정할 수 있게 합니다. 또한, TodoList 대신 각각의 Todo 컴포넌트를 렌더링합니다.

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

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

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

  // addTodo, completeTodo, removeTodo 함수 구현은 생략

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

export default App;

3. TodoForm 컴포넌트 수정

사용자가 수정할 값을 입력할 수 있도록 TodoForm 컴포넌트를 수정합니다. 수정 모드에서는 edit prop을 사용하여 초기값을 설정합니다.

import React, { useState, useEffect } from 'react';

function TodoForm(props) {
  const [input, setInput] = useState(props.edit ? props.edit.value : '');

  useEffect(() => {
    if (props.edit) {
      setInput(props.edit.value);
    }
  }, [props.edit]);

  const handleChange = e => {
    setInput(e.target.value);
  };

  const handleSubmit = e => {
    e.preventDefault();

    props.onSubmit({
      id: Math.floor(Math.random() * 10000),
      text: input
    });

    setInput('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="할 일을 수정하세요"
        value={input}
        onChange={handleChange}
      />
      <button>업데이트</button>
    </form>
  );
}

export default TodoForm;

이 예시에서는 각 할 일 항목에 '수정' 버튼을 추가하고, 해당 버튼을 클릭하면 할 일을 수정할 수 있는 폼으로 전환됩니다. 사용자가 수정을 완료하고 '업데이트' 버튼을 누르면, 변경된 내용이 할 일 목록에 반영됩니다. 이처

럼 리액트에서는 상태(state)와 이벤트 처리를 통해 사용자 인터페이스의 동적인 변경을 관리할 수 있습니다.