작은 CRUD 애플리케이션 만들기, CRUD 기능 구현을 통해 리액트 기본기 다지기

리액트는 현대 웹 개발에서 널리 사용되는 라이브러리로, 단일 페이지 애플리케이션(SPA) 개발에 적합합니다. 이 포스트에서는 리액트를 사용하여 간단한 CRUD(생성, 읽기, 수정, 삭제) 애플리케이션을 만들어봄으로써 리액트를 배우고 기본기를 다질 것입니다. 전체적인 구조와 구현 과정을 단계별로 설명하겠습니다.

1. 프로젝트 설정

먼저, 리액트 애플리케이션을 설정해야 합니다. Create React App이라는 도구를 사용하여 신속하게 프로젝트를 생성할 수 있습니다. 아래 명령어를 사용하여 새로운 리액트 프로젝트를 생성합니다.

npx create-react-app my-crud-app

프로젝트 폴더로 이동합니다:

cd my-crud-app

2. 기본 구조 생성

프로젝트가 생성되면, 기본적으로 몇 가지 파일들이 자동으로 생성됩니다. 그 중에서도 src 폴더에 주목해야 합니다. 이 폴더는 우리의 애플리케이션 코드를 작성하는 곳입니다. 우리는 여기에서 컴포넌트를 생성하고 CRUD 기능을 구현할 것입니다.

2.1 컴포넌트 구조

CRUD 애플리케이션을 위한 기본 컴포넌트 구조를 설정합니다. 다음과 같은 컴포넌트를 만들 예정입니다:

App: 애플리케이션의 메인 컴포넌트
TodoList: 할 일 목록을 표시하는 컴포넌트
AddTodo: 새 할 일을 추가하는 컴포넌트
EditTodo: 할 일을 수정하는 컴포넌트

3. 기본 앱 구성

이제 기본적인 앱을 구성해봅시다. App.js 파일을 다음과 같이 수정합니다:


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

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

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

    const deleteTodo = (id) => {
        setTodos(todos.filter((todo) => todo.id !== id));
    };

    const initiateEdit = (todo) => {
        setEditTodo(todo);
    };

    const updateTodo = (updatedTodo) => {
        setTodos(todos.map(todo => (todo.id === updatedTodo.id ? updatedTodo : todo)));
        setEditTodo(null);
    };

    return (
        
            할 일 목록
            
            
            {editTodo && }
        
    );
}

export default App;

4. TodoList 컴포넌트 구현

TodoList 컴포넌트를 만들어 할 일을 표시하고 삭제 및 수정할 수 있도록 구현합니다. TodoList.js 파일을 다음과 같이 작성합니다:


import React from 'react';

function TodoList({ todos, deleteTodo, initiateEdit }) {
    return (
        
            {todos.map((todo) => (
                
                    {todo.text}
                    
                    
                
            ))}
        
    );
}

export default TodoList;

5. AddTodo 컴포넌트 구현

새로운 할 일을 추가하기 위해 AddTodo 컴포넌트를 만듭니다. 사용자가 새로운 할 일을 입력하고 추가할 수 있도록 합니다. AddTodo.js 파일을 작성합니다:


import React, { useState } from 'react';

function AddTodo({ addTodo }) {
    const [todoText, setTodoText] = useState("");

    const handleSubmit = (e) => {
        e.preventDefault();
        addTodo({ id: Date.now(), text: todoText });
        setTodoText("");
    };

    return (
        
             setTodoText(e.target.value)} 
                placeholder="할 일을 입력하세요"
            />
            
        
    );
}

export default AddTodo;

6. EditTodo 컴포넌트 구현

사용자가 기존의 할 일을 편집할 수 있는 EditTodo 컴포넌트를 만듭니다. 사용자는 기존의 내용을 수정하고 업데이트할 수 있습니다. EditTodo.js 파일을 다음과 같이 작성합니다:


import React, { useState } from 'react';

function EditTodo({ todo, updateTodo }) {
    const [updatedText, setUpdatedText] = useState(todo.text);

    const handleSubmit = (e) => {
        e.preventDefault();
        updateTodo({ ...todo, text: updatedText });
    };

    return (
        
             setUpdatedText(e.target.value)} 
            />
            
        
    );
}

export default EditTodo;

7. 애플리케이션 실행

모든 컴포넌트를 구현한 후 애플리케이션을 실행하여 동작하는지 확인합니다. 아래 명령어로 서버를 시작합니다:

npm start

브라우저에서 http://localhost:3000에 접속하여 애플리케이션을 확인하고 할 일을 추가하고 수정 및 삭제할 수 있습니다.

8. 최종 결과

이 애플리케이션을 통해 리액트의 기본 개념인 컴포넌트, 상태 관리, 이벤트 처리 등을 학습할 수 있었습니다. CRUD 애플리케이션을 만드는 것은 리액트의 기본기를 다지는데 매우 유용한 연습입니다.

9. 결론

리액트를 배우는 가장 좋은 방법 중 하나는 실제로 애플리케이션을 만들어보는 것입니다. 여기서 소개한 간단한 CRUD 애플리케이션은 리액트의 기본 개념을 이해하고 활용하는 데 큰 도움이 될 것입니다. 앞으로 더 복잡한 애플리케이션을 개발하면서 이 경험을 바탕으로 더욱 발전하길 바랍니다.

10. 추가 학습 자료

리액트를 더 깊이 있게 배우기를 원한다면 다음 자료들을 추천드립니다: