[React] React로 할 일 관리 앱 만들기: 2장 - TodoList 컴포넌트 생성

 

안녕하세요! 이번 포스트에서는 TodoList 컴포넌트를 생성하고 기본적인 할 일 목록 기능을 구현해 보겠습니다.

1. TodoList 컴포넌트 생성

먼저 src 폴더 안에 components 폴더를 만들고, 그 안에 TodoList.js 파일을 생성합니다.

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

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

  return (
    <div>
      <h2>할 일 목록</h2>
      {/* 여기에 입력 폼과 목록이 들어갈 예정입니다 */}
    </div>
  );
}

export default TodoList;

이 코드에서는 useState 훅을 사용하여 두 가지 상태를 관리합니다:

• todos: 할 일 목록을 저장하는 배열
• inputValue: 새로운 할 일을 입력하는 필드의 값

2. 할 일 추가 기능 구현

이제 새로운 할 일을 추가하는 기능을 구현해 보겠습니다.

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

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

  const handleSubmit = (e) => {
    e.preventDefault();
    if (inputValue.trim() !== '') {
      setTodos([...todos, { id: Date.now(), text: inputValue, completed: false }]);
      setInputValue('');
    }
  };

  return (
    <div>
      <h2>할 일 목록</h2>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={inputValue}
          onChange={handleInputChange}
          placeholder="새로운 할 일을 입력하세요"
        />
        <button type="submit">추가</button>
      </form>
      {/* 여기에 목록이 들어갈 예정입니다 */}
    </div>
  );
}

이 코드에서는:

• handleInputChange 함수로 입력 필드의 값을 관리합니다.
• handleSubmit 함수로 새로운 할 일을 목록에 추가합니다.

3. 할 일 목록 표시

이제 추가된 할 일을 목록으로 표시해 보겠습니다.

function TodoList() {
  // ... 이전 코드 ...

  return (
    <div>
      <h2>할 일 목록</h2>
      <form onSubmit={handleSubmit}>
        {/* ... 이전 코드 ... */}
      </form>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            <span>{todo.text}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}

이 코드에서는 todos 배열을 map 함수로 순회하며 각 할 일을 목록 항목으로 표시합니다.

4. App 컴포넌트에 TodoList 추가

마지막으로, App.js 파일을 수정하여 TodoList 컴포넌트를 추가합니다.

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

function App() {
  return (
    <div className="App">
      <h1>할 일 관리 앱</h1>
      <TodoList />
    </div>
  );
}

export default App;

실행 결과

이제 npm start 명령어로 앱을 실행하면, 할 일을 추가하고 목록으로 표시하는 기본적인 기능이 구현된 것을 확인할 수 있습니다.

다음 단계

기본적인 할 일 목록 기능을 구현했습니다. 다음 챕터에서는 할 일 삭제와 완료 표시 기능을 추가해 보겠습니다.

React로 앱을 만드는 과정이 어떠신가요? 궁금한 점이나 어려운 부분이 있다면 댓글로 남겨주세요!