34. 실전 프로젝트 구현 - 1

간단한 ToDo List 애플리케이션 구현 예제

이번 글에서는 React를 사용하여 간단한 ToDo List 애플리케이션을 구현하는 방법에 대해 알아보겠습니다. ToDo List는 많은 웹 애플리케이션에서 자주 사용되는 기능 중 하나이며, React를 활용하여 구현할 수 있습니다. 이 예제를 통해 React의 기본 개념과 사용 방법을 익힐 수 있습니다.

1. 프로젝트 설정

먼저 React 프로젝트를 생성하고 필요한 패키지를 설치합니다. 다음 명령어를 사용하여 새로운 React 프로젝트를 생성합니다.

npx create-react-app todo-list-app
cd todo-list-app

 

그리고 ToDo List 애플리케이션에서 사용할 추가적인 패키지인 uuid를 설치합니다.

npm install uuid

2. ToDo List 구현

이제 ToDo List를 구현해보겠습니다. 먼저 src 폴더 내에 components 폴더를 생성하고 TodoList.js 파일을 생성합니다.

// src/components/TodoList.js
import React, { useState } from 'react';
import { v4 as uuidv4 } from 'uuid';

const TodoList = () => {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');

  const addTodo = () => {
    if (inputValue.trim() !== '') {
      setTodos([...todos, { id: uuidv4(), text: inputValue }]);
      setInputValue('');
    }
  };

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

  return (
    <div>
      <h1>ToDo List</h1>
      <input
        type="text"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button onClick={addTodo}>Add</button>
      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            {todo.text}
            <button onClick={() => deleteTodo(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default TodoList;

3. 애플리케이션 실행

이제 ToDo List 애플리케이션을 실행해봅시다. App.js 파일에서 TodoList 컴포넌트를 import하고 렌더링합니다.

// src/App.js
import React from 'react';
import TodoList from './components/TodoList';

function App() {
  return (
    <div className="App">
      <TodoList />
    </div>
  );
}

export default App;

4. 실행 및 결과 확인

마지막으로 애플리케이션을 실행하고 ToDo List를 확인해봅시다.

npm start

 

이제 브라우저에서 http://localhost:3000 으로 접속하여 ToDo List를 사용할 수 있습니다.

5. 결론

간단한 ToDo List 애플리케이션을 구현하면서 React의 기본적인 개념 및 사용 방법을 익힐 수 있었습니다. 이를 바탕으로 더 복잡한 애플리케이션을 개발할 때 유용하게 활용할 수 있을 것입니다. 코드 예제와 함께 직접 실습해보면서 React의 다양한 기능을 더 깊게 이해할 수 있습니다.