리액트 강좌: To Do 앱 예제 - 할 일 삭제하기

이번 강좌에서는 리액트(React)를 사용하여 간단한 To Do 앱을 만들어 봅니다. 특히 할 일을 삭제하는 기능을 집중적으로 다룰 것입니다. To Do 앱은 기본적인 CRUD(Create, Read, Update, Delete) 작업을 보여 줄 수 있는 탁월한 예제입니다. 개발 과정에서 우리가 배우게 될 내용은 리액트의 기본 구조, 컴포넌트 관리, 상태(state) 관리, 이벤트 처리 및 일부 기본적인 CSS 스타일링 등을 포함합니다.

1. 리액트란?

리액트는 페이스북에서 개발한 UI 라이브러리로, 사용자 인터페이스를 만들기 위해 사용됩니다. 리액트는 컴포넌트 기반 구조를 가지고 있어 재사용성을 높이고, virtual DOM을 활용하여 성능을 향상시키는 특징이 있습니다. 이러한 특징 때문에 많은 개발자들이 리액트를 사용하여 다양한 웹 애플리케이션을 개발하고 있습니다.

2. To Do 앱 개요

To Do 앱은 사용자가 할 일 목록을 관리할 수 있는 간단한 애플리케이션입니다. 사용자는 새로운 할 일을 추가하고, 이미 등록한 할 일을 삭제할 수 있습니다. 이 애플리케이션을 통해 리액트의 기본적인 상태 관리 및 컴포넌트 간의 데이터 흐름을 이해할 수 있을 것입니다.

3. 개발 환경 세팅

To Do 앱을 개발하기 위해 필요한 환경을 세팅해야 합니다. 다음 단계에 따라 진행하세요:

Node.js 설치: Node.js는 JavaScript 환경으로, 리액트 애플리케이션을 실행하는 데 필요합니다.
create-react-app 사용: 커맨드 라인에서 다음 명령어를 입력하여 새로운 리액트 프로젝트를 생성합니다.

npx create-react-app todo-app

이 명령이 완료되면 “todo-app”이라는 폴더가 생성됩니다. 이 폴더로 이동하여 프로젝트를 시작할 수 있습니다.

cd todo-app

4. 기본 컴포넌트 만들기

이제 기본적인 컴포넌트를 만들어 보겠습니다. To Do 앱은 최소한 다음과 같은 컴포넌트들로 구성됩니다:

App: 메인 컴포넌트로 모든 다른 컴포넌트를 포함합니다.
TodoList: 할 일 목록을 보여주는 컴포넌트입니다.
TodoItem: 개별 할 일 항목을 나타내는 컴포넌트입니다.
AddTodo: 새로운 할 일을 추가하는 컴포넌트입니다.

이 컴포넌트들은 리액트의 특성을 잘 보여줍니다. 아래는 각 컴포넌트를 만드는 방법입니다.

4.1 App 컴포넌트


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

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

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

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

  return (
    
      My To Do App
      
      
    
  );
};

export default App;

위 코드에서는 useState 훅을 사용하여 todos라는 상태 변수를 선언하고, 이를 초기값으로 빈 배열을 설정했습니다. addTodo 함수는 새로운 할 일을 추가하는 데 사용되며, deleteTodo 함수는 특정 인덱스의 할 일을 삭제하는 데 사용됩니다.

4.2 AddTodo 컴포넌트


import React, { useState } from 'react';

const AddTodo = ({ addTodo }) => {
  const [value, setValue] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!value) return;
    addTodo(value);
    setValue('');
  };

  return (
    
       setValue(e.target.value)} 
        placeholder="Add a new task" 
      />
      
    
  );
};

export default AddTodo;

위 AddTodo 컴포넌트는 사용자가 입력한 값을 상태로 관리하고, 폼 제출 시 addTodo 함수를 호출하여 새로운 할 일을 추가합니다.

4.3 TodoList 컴포넌트


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

const TodoList = ({ todos, deleteTodo }) => {
  return (
    
      {todos.map((todo, index) => (
        
      ))}
    
  );
};

export default TodoList;

TodoList 컴포넌트는 todos 배열을 받아 각 todo 항목에 대해 TodoItem 컴포넌트를 렌더링합니다. deleteTodo 함수도 전달하여 각 항목에서 삭제 기능을 사용할 수 있습니다.

4.4 TodoItem 컴포넌트


import React from 'react';

const TodoItem = ({ todo, index, deleteTodo }) => {
  return (
    
      {todo}
      
    
  );
};

export default TodoItem;

TodoItem 컴포넌트에서는 각 할 일 항목을 보여주고, 삭제 버튼을 클릭하면 deleteTodo를 호출하여 해당 할 일을 삭제하는 기능을 수행합니다.

5. 스타일링 추가하기

기본적인 기능 구현이 완료되었습니다. 이제 CSS 스타일을 추가하여 우리 To Do 앱을 더욱 보기 좋게 만들어 보겠습니다. 다음과 같은 스타일을 추가할 수 있습니다.


/* App.css */
body {
  font-family: Arial, sans-serif;
}

h1 {
  text-align: center;
}

form {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

input {
  padding: 10px;
  margin-right: 5px;
}

button {
  padding: 10px;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

위 CSS 코드는 App의 기본적인 스타일을 정의합니다. Flexbox를 사용하여 폼의 정렬을 돕고, 각 할 일 항목에 대한 스타일을 적용합니다.

6. 최종 확인 및 결론

이 강좌를 통해 간단한 To Do 앱을 만들며 리액트의 기본 개념을 배울 수 있었습니다. 할 일을 추가하고 삭제하는 기본적인 기능을 구현했으며, 각각의 컴포넌트가 어떻게 상호작용하는지 이해하는 데 도움이 되었기를 바랍니다. 이 앱을 기반으로 더 많은 기능을 추가하며 리액트를 더욱 깊이있게 학습해보세요.

리액트 강좌: To Do 앱 예제 – 할 일 삭제하기