리액트 생성 기능 구현

생성 기능 구현

리액트에서 생성 기능을 구현하는 것은 여러분의 프로젝트에서 사용자가 새로운 데이터를 입력하고, 그 데이터가 애플리케이션의 상태에 추가되어 UI에 반영되게 하는 기능을 말합니다. 일반적인 CRUD(Create, Read, Update, Delete) 애플리케이션의 'Create' 부분에 해당합니다. 예를 들어, 할 일 목록(Todo List) 애플리케이션에서 새로운 할 일을 추가하는 기능을 구현해볼까요?

1. 컴포넌트 구조 설계

• App: 주요 상태 관리 및 할 일 목록을 렌더링하는 컴포넌트
• TodoForm: 사용자로부터 새로운 할 일을 입력받는 폼
• TodoList: 할 일 목록을 렌더링하는 컴포넌트

2. App 컴포넌트

App 컴포넌트는 전체 애플리케이션의 상태를 관리합니다. 여기서는 할 일 목록을 상태로 관리합니다.

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

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

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

  return (
    <div>
      <h1>할 일 목록</h1>
      <TodoForm onSubmit={addTodo} />
      <TodoList todos={todos} />
    </div>
  );
}

export default App;

3. TodoForm 컴포넌트

사용자로부터 새로운 할 일의 내용을 입력받아 App 컴포넌트의 addTodo 함수에 전달합니다.

import React, { useState } from 'react';

function TodoForm(props) {
  const [input, setInput] = useState('');

  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;

4. TodoList 컴포넌트

App 컴포넌트로부터 전달받은 할 일 목록을 렌더링합니다.

import React from 'react';

function TodoList({ todos }) {
  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}

export default TodoList;

이 기본 예제를 통해 리액트에서 생성 기능을 구현하는 방법을 간단히 살펴보았습니다. 실제 프로젝트에서는 더 복잡한 상태 관리, 폼 검증, 스타일링 등이 추가될 수 있습니다.