React.js를 이용한 ToDo 애플리케이션 제작 방법

09 Nov 2023

reactjs

React.js는 JavaScript를 이용한 프론트엔드 라이브러리로, 사용자 인터페이스를 빠르고 간편하게 구축할 수 있습니다. 이번 포스트에서는 React.js를 이용하여 ToDo 애플리케이션을 제작하는 방법을 알아보겠습니다.

1. React 프로젝트 설정하기

먼저, React 프로젝트를 설정해야 합니다. create-react-app 명령어를 이용하면 간단하게 새로운 React 프로젝트를 생성할 수 있습니다.

$ npx create-react-app todo-app

위 명령어를 실행하면 todo-app이라는 폴더가 생성되고, React 프로젝트의 기본 구조가 설정됩니다.

2. ToDo 컴포넌트 생성하기

ToDo 애플리케이션에서는 각각의 할일을 나타내는 ToDo 아이템을 만들어야 합니다. 이를 위해 TodoItem이라는 함수형 컴포넌트를 생성합니다.

import React from 'react';

function TodoItem({ text }) {
  return (
    <div>
      <input type="checkbox" />
      <span>{text}</span>
    </div>
  );
}

export default TodoItem;

위 코드는 ToDo 아이템을 나타내는 TodoItem 컴포넌트입니다. text prop을 받아와 체크박스와 함께 텍스트를 출력합니다.

3. ToDo 리스트 출력하기

ToDo 애플리케이션에서는 여러 개의 ToDo 아이템을 리스트 형태로 출력해야 합니다. 이를 위해 TodoList 컴포넌트를 생성합니다.

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

function TodoList({ todos }) {
  return (
    <div>
      {todos.map((todo, index) => (
        <TodoItem key={index} text={todo.text} />
      ))}
    </div>
  );
}

export default TodoList;

위 코드는 ToDo 아이템들을 리스트 형태로 출력하는 TodoList 컴포넌트입니다. todos prop을 받아와 TodoItem 컴포넌트를 여러 번 렌더링합니다.

4. 사용자 입력 처리하기

ToDo 애플리케이션에서는 사용자가 새로운 할일을 입력하고 추가할 수 있어야 합니다. 이를 위해 TodoForm 컴포넌트를 생성합니다.

import React, { useState } from 'react';

function TodoForm({ addTodo }) {
  const [text, setText] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    addTodo(text);
    setText('');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        placeholder="할일을 입력하세요"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <button type="submit">추가</button>
    </form>
  );
}

export default TodoForm;

위 코드는 사용자 입력을 처리하는 TodoForm 컴포넌트입니다. addTodo 함수를 prop으로 받아와 사용자가 입력한 값을 전달합니다.

5. 애플리케이션 구성하기

이제 위에서 생성한 컴포넌트들을 사용하여 ToDo 애플리케이션을 구성해보겠습니다.

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

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

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

  return (
    <div>
      <TodoList todos={todos} />
      <TodoForm addTodo={addTodo} />
    </div>
  );
}

export default App;

위 코드는 ToDo 애플리케이션을 구성하는 App 컴포넌트입니다. todos 상태와 addTodo 함수를 정의하고, TodoList와 TodoForm 컴포넌트를 렌더링합니다.

6. 컴포넌트 렌더링하기

마지막으로, index.js 파일에서 App 컴포넌트를 렌더링하도록 설정합니다.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

위 코드는 index.js 파일에서 App 컴포넌트를 root 요소에 렌더링하는 예시입니다.

이제 React.js를 이용한 ToDo 애플리케이션을 제작하는 방법을 알아보았습니다. 실제로 프로젝트를 생성하고, 컴포넌트를 작성해보면 더욱 자세한 개발 경험을 할 수 있을 것입니다.

더 자세한 정보는 React 공식 문서를 참고하시기 바랍니다.

#React #ToDo