React.js는 사용자 인터페이스를 구축하기 위한 자바스크립트 라이브러리로 많은 개발자들에게 사랑받고 있습니다. 이번 포스트에서는 React.js를 사용하여 ToDo 애플리케이션을 제작하는 방법에 대해 알아보겠습니다.

목차

• 프로젝트 설정
• 컴포넌트 구성
• 상태(state) 관리
• 할일 추가 기능 구현
• 할일 완료 처리 기능 구현
• 결론

프로젝트 설정

React.js를 사용하여 ToDo 애플리케이션을 개발하기 위해서는 먼저 React 프로젝트를 설정해야 합니다. 다음 명령어를 사용하여 새로운 React 프로젝트를 생성합니다.

npx create-react-app todo-app
cd todo-app
npm start

프로젝트가 성공적으로 생성되고 브라우저에서 애플리케이션이 실행되는 것을 확인할 수 있습니다.

컴포넌트 구성

ToDo 애플리케이션을 구성하기 위해 필요한 컴포넌트들을 작성해보겠습니다. 아래는 간단한 구성 예시입니다.

import React, { useState } from 'react';

function ToDoApp() {
  const [todos, setTodos] = useState([]);
  const [newTodo, setNewTodo] = useState('');

  const handleInputChange = (e) => {
    setNewTodo(e.target.value);
  };

  const handleAddTodo = () => {
    setTodos([...todos, newTodo]);
    setNewTodo('');
  };

  return (
    <div>
      <input type="text" value={newTodo} onChange={handleInputChange} />
      <button onClick={handleAddTodo}>Add</button>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
    </div>
  );
}

export default ToDoApp;

상태(state) 관리

ToDo 애플리케이션에서는 할일 목록과 추가할 새로운 할일을 상태로 관리해야 합니다. 위 코드에서 useState 훅을 사용하여 todos와 newTodo 상태를 설정하고, handleInputChange 함수를 통해 newTodo 상태를 업데이트하도록 구현하였습니다.

할일 추가 기능 구현

할일을 추가하는 기능은 handleAddTodo 함수에서 구현됩니다. 입력된 새로운 할일을 현재 할일 목록에 추가하고, 입력 필드를 초기화하는 로직이 포함되어 있습니다.

할일 완료 처리 기능 구현

ToDo 애플리케이션에서 할일을 완료 처리하기 위해서는 각 할일 항목에 완료 버튼을 추가하고, 버튼을 클릭했을 때 해당 할일을 목록에서 제거하는 로직을 작성해야 합니다.

// ...
const handleCompleteTodo = (index) => {
  const updatedTodos = todos.filter((_, i) => i !== index);
  setTodos(updatedTodos);
};

// ...
<ul>
  {todos.map((todo, index) => (
    <li key={index}>
      {todo}
      <button onClick={() => handleCompleteTodo(index)}>Complete</button>
    </li>
  ))}
</ul>
// ...

handleCompleteTodo 함수에서는 index를 받아 해당 인덱스가 아닌 항목들로 새로운 할일 목록을 생성하여 상태를 업데이트합니다. 완료 버튼은 각 할일 항목마다 생성되며, 클릭 시 해당 항목이 완료 처리되고 리스트에서 제거됩니다.

결론

이제 React.js를 사용하여 ToDo 애플리케이션을 제작할 수 있는 기본적인 방법에 대해 알아보았습니다. 물론 이 예시 코드는 간단한 구현에 초점을 맞춘 것이며, 보다 복잡하고 실용적인 애플리케이션을 개발하기 위해서는 추가적인 기능과 로직을 구현해야 합니다. React.js의 다양한 기능과 활용법을 익히면 더욱 효과적인 ToDo 애플리케이션을 만들 수 있을 것입니다.

#React #ToDo