간단한 할 일 목록 앱 만들기

지금까지 조건부 렌더링, 리스트와 key, 폼, useEffect까지 React 컴포넌트의 심화 개념을 익혔습니다. 이제 이 지식을 활용해 작지만 제대로 동작하는 애플리케이션을 직접 만들어 볼 차례입니다. 이 글에서는 간단한 할 일 목록(Todo List) 애플리케이션을 만듭니다. 이 앱은 새 할 일을 추가하고, 할 일 목록을 보여 주며, 체크박스로 각 할 일의 완료 상태를 바꾸고, 할 일을 삭제할 수 있습니다. 실습을 통해 배운 개념이 실제 코드에서 어떻게 맞물리는지 체감해 보세요.

실습 목표: Todo 상태 흐름 안정화

이 실습은 완성된 예제를 따라가며 입력과 목록의 상태가 어떻게 바뀌는지 확인하는 방식으로 진행합니다. 특히 key를 어떻게 고르고 상태를 어떻게 갱신하느냐가 UI의 일관성에 어떤 영향을 주는지 점검합니다.

이 앱에는 앞에서 배운 개념이 모두 들어 있습니다. useState로 할 일 목록 배열과 입력 필드의 값을 관리하고, 새 할 일을 받는 <input>과 제출 버튼을 제어 컴포넌트로 만듭니다. 할 일 목록은 map()과 고유한 key로 렌더링하고, 할 일의 추가와 완료 상태 전환, 삭제를 이벤트로 처리하며, 완료 상태에 따라 글자에 취소선을 긋는 조건부 렌더링을 씁니다. 선택 사항으로, 할 일 목록이 바뀔 때마다 useEffect로 로컬 스토리지에 저장해 새로고침해도 목록이 남게 합니다.

준비 단계: 상태 모델 설계

먼저 어떤 값을 어떤 state로 둘지 정합니다. 화면 안에서만 쓰는 단순한 값은 useState로 충분하지만, 저장과 복원의 규칙이 늘어나기 시작하면 상태의 흐름을 분명히 나눠 관리하는 편이 안전합니다. 여기서는 할 일 목록 배열 todoItems와 입력 중인 글자 newTodo, 두 개의 state를 씁니다.

Vite로 만든 프로젝트가 있다고 가정하고, src 폴더에 components 폴더를 만든 뒤 그 안에 TodoList.jsx를 만들어 App.jsx에서 렌더링하는 방식으로 진행합니다. 로컬 스토리지 부분은 저장소에 접근할 수 있고 저장된 JSON이 올바른 Todo 배열이라는 조건을 전제로 하며, 손상된 데이터의 복구나 형식 검증은 구현하지 않습니다. 먼저 src/App.jsx의 기존 내용을 다음으로 바꿉니다.

import React from 'react';
import './App.css'; // 필요하다면 CSS 파일을 유지합니다.
import TodoList from './components/TodoList'; // TodoList 컴포넌트 불러오기

function App() {
  return (
    <div className="App">
      <h1>나의 멋진 Todo List</h1>
      <TodoList />
    </div>
  );
}

export default App;

App은 제목과 TodoList 하나만 그리고, 상태와 이벤트 처리는 모두 TodoList가 맡습니다. 그다음 src/components/TodoList.jsx 파일을 만들고 다음 코드를 작성합니다. 아래 코드는 주석의 번호 1.부터 7.까지 상태 정의, 저장, 입력, 추가, 완료 전환, 삭제, 렌더링의 순서로 읽으면 되며, 각 부분이 하는 일은 코드 뒤에서 하나씩 짚습니다.

import React, { useState, useEffect } from 'react';

function TodoList() {
  // 1. 상태 정의: 할 일 목록 배열 (todoItems)과 새 할 일 입력 값 (newTodo)
  const [todoItems, setTodoItems] = useState(() => {
    // (선택 사항) 로컬 스토리지에서 초기 할 일 목록 불러오기
    const savedTodos = localStorage.getItem('todoItems');
    return savedTodos ? JSON.parse(savedTodos) : [];
  });
  const [newTodo, setNewTodo] = useState('');

  // 2. (선택 사항) todoItems가 변경될 때마다 로컬 스토리지에 저장
  useEffect(() => {
    localStorage.setItem('todoItems', JSON.stringify(todoItems));
  }, [todoItems]); // todoItems가 의존성 배열에 있으므로, 변경될 때마다 실행

  // 3. 새 할 일 입력 필드 변경 핸들러
  const handleInputChange = (e) => {
    setNewTodo(e.target.value);
  };

  // 4. 할 일 추가 핸들러
  const handleAddTodo = (e) => {
    e.preventDefault(); // 폼 제출 시 페이지 새로고침 방지
    if (newTodo.trim() === '') return; // 빈 값은 추가하지 않음

    const newId = todoItems.length > 0 ? Math.max(...todoItems.map(item => item.id)) + 1 : 1;
    const newTodoItem = {
      id: newId,
      text: newTodo,
      completed: false, // 초기에는 완료되지 않은 상태
    };

    setTodoItems([...todoItems, newTodoItem]); // 기존 목록에 새 할 일 추가
    setNewTodo(''); // 입력 필드 초기화
  };

  // 5. 할 일 완료 상태 토글 핸들러
  const handleToggleComplete = (id) => {
    setTodoItems(
      todoItems.map((item) =>
        item.id === id ? { ...item, completed: !item.completed } : item
      )
    );
  };

  // 6. 할 일 삭제 핸들러
  const handleDeleteTodo = (id) => {
    setTodoItems(todoItems.filter((item) => item.id !== id));
  };

  // 7. JSX 렌더링
  return (
    <div style={{ maxWidth: '500px', margin: '30px auto', padding: '20px', border: '1px solid #eee', borderRadius: '10px', boxShadow: '0 2px 10px rgba(0,0,0,0.1)' }}>
      {/* 할 일 추가 폼 */}
      <form onSubmit={handleAddTodo} style={{ display: 'flex', marginBottom: '20px' }}>
        <input
          type="text"
          value={newTodo}
          onChange={handleInputChange}
          placeholder="새 할 일을 입력하세요..."
          style={{ flexGrow: 1, padding: '10px', fontSize: '16px', border: '1px solid #ddd', borderRadius: '5px 0 0 5px' }}
        />
        <button type="submit" style={{ padding: '10px 15px', fontSize: '16px', backgroundColor: '#007bff', color: 'white', border: 'none', borderRadius: '0 5px 5px 0', cursor: 'pointer' }}>
          추가
        </button>
      </form>

      {/* 할 일 목록 */}
      {todoItems.length === 0 ? (
        <p style={{ textAlign: 'center', color: '#666' }}>아직 할 일이 없습니다. 새 할 일을 추가해 보세요!</p>
      ) : (
        <ul style={{ listStyle: 'none', padding: 0 }}>
          {todoItems.map((item) => (
            <li
              key={item.id}
              style={{
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-between',
                padding: '10px',
                borderBottom: '1px dashed #eee',
                backgroundColor: item.completed ? '#e6ffe6' : 'white', // 조건부 스타일링
              }}
            >
              <div style={{ display: 'flex', alignItems: 'center', flexGrow: 1 }}>
                <input
                  type="checkbox"
                  checked={item.completed}
                  onChange={() => handleToggleComplete(item.id)}
                  style={{ marginRight: '10px', transform: 'scale(1.2)' }}
                />
                <span
                  style={{
                    fontSize: '18px',
                    textDecoration: item.completed ? 'line-through' : 'none', // 조건부 렌더링 (취소선)
                    color: item.completed ? '#999' : '#333',
                  }}
                >
                  {item.text}
                </span>
              </div>
              <button
                onClick={() => handleDeleteTodo(item.id)}
                style={{
                  backgroundColor: '#dc3545',
                  color: 'white',
                  border: 'none',
                  padding: '5px 10px',
                  borderRadius: '5px',
                  cursor: 'pointer',
                  fontSize: '14px',
                }}
              >
                삭제
              </button>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default TodoList;

코드 설명 및 핵심 개념 복습

이 TodoList.jsx 코드는 지금까지 배운 여러 개념을 함께 씁니다. 먼저 state입니다. todoItems는 현재 할 일 목록을 담는 배열 state로, 각 할 일 객체는 id, text, completed 속성을 가집니다. newTodo는 새 할 일을 받는 <input> 필드의 값을 관리하는 state입니다.

폼은 제어 컴포넌트로 다룹니다. handleInputChange는 <input>의 onChange에 연결되어 newTodo를 실시간으로 갱신하고, value={newTodo}로 입력 필드가 newTodo에 따라 제어됩니다. handleAddTodo는 <form>의 onSubmit에 연결되어, e.preventDefault()로 페이지 새로고침을 막고 newTodo를 todoItems 배열에 더한 뒤 newTodo를 비웁니다. 새 할 일에는 나중에 key로 쓸 id를 주는데, 현재 목록의 가장 큰 id에 1을 더하고 목록이 비어 있으면 1을 씁니다.

리스트는 todoItems.map((item) => ...)으로 각 할 일을 <li> 요소로 바꿔 렌더링하며, 각 <li>에 key={item.id}로 할 일의 고유 id를 줍니다. 이벤트는 handleAddTodo, handleToggleComplete, handleDeleteTodo가 각각 제출과 체크박스 변경, 삭제 버튼 클릭에 연결되어 처리합니다. 이 가운데 handleToggleComplete와 handleDeleteTodo는 id를 인자로 받아 특정 할 일에 대한 작업을 하며, map() 안에서 onClick={() => handleDeleteTodo(item.id)}처럼 화살표 함수로 감싸 인자를 넘깁니다.

조건부 렌더링은 여러 곳에서 씁니다. todoItems.length === 0 ? <p> ... </p> : <ul> ... </ul>은 목록이 비어 있으면 “아직 할 일이 없습니다. 새 할 일을 추가해 보세요!”를, 그렇지 않으면 목록을 보여 주는 삼항 연산자입니다. 할 일이 완료되면 backgroundColor: item.completed ? '#e6ffe6' : 'white'로 배경색이 바뀌고, textDecoration: item.completed ? 'line-through' : 'none'으로 글자에 취소선이 그어집니다. 체크박스의 checked 속성도 item.completed와 연결해 제어 컴포넌트로 만들었습니다.

마지막으로 로컬 스토리지입니다. 저장된 목록을 불러오는 일은 useEffect가 아니라 첫 번째 useState에 넘긴 초기화 함수가 맡습니다. 이 함수가 localStorage.getItem('todoItems')로 이전에 저장한 목록을 읽어, 있다면 todoItems의 초기값으로 씁니다. 그리고 useEffect가 의존성 배열 [todoItems]에 따라 목록이 바뀔 때마다 localStorage.setItem으로 현재의 todoItems를 JSON 문자열로 저장하므로, 페이지를 새로고침해도 할 일 목록이 남습니다.

검증 순서: 추가·토글·삭제

전: [] / newTodo: "복습"
후: [{id:1, text:"복습",
      completed:false}]
입력 초안: ""

대상 id: 1
전: completed:false
후: completed:true
나머지 항목: 그대로

전: [id1, id2]
삭제 대상: id1
후: [id2]

todoItems → map / key={item.id}
목록 변경 → [todoItems] Effect
           → localStorage JSON

전: [] / newTodo: "복습"
후: [{id:1, text:"복습",
      completed:false}]
입력 초안: ""

대상 id: 1
전: completed:false
후: completed:true
나머지 항목: 그대로

전: [id1, id2]
삭제 대상: id1
후: [id2]

todoItems → map / key={item.id}
목록 변경 → [todoItems] Effect
           → localStorage JSON

위 그림은 추가, 토글, 삭제가 같은 todoItems 목록에 적용하는 서로 독립된 변경이라는 점을 보여 줍니다. newTodo는 입력 중인 초안이고 todoItems는 저장할 목록이며, 세 동작은 모두 새 배열을 만들어 React가 다음 화면을 그리게 합니다. 추가는 []인 목록에 newTodo가 “복습”일 때 [{id:1, text:"복습", completed:false}]를 만들고 입력 초안을 비웁니다. 공백뿐인 입력은 trim으로 걸러 내지만, 저장하는 text는 원래의 newTodo입니다.

토글은 map으로 같은 id의 객체만 복사해 completed를 뒤집고 나머지 항목은 그대로 두며, 체크박스의 checked와 취소선, 배경색이 모두 같은 상태를 읽습니다. 삭제는 [id1, id2]에서 filter로 대상 id1을 빼 [id2]를 만들며, 남은 id2의 key는 그대로입니다. 목록이 바뀌면 다음 렌더에서 key={item.id}로 목록을 그리고, [todoItems] Effect가 로컬 스토리지에 JSON으로 저장하며, 새로고침하면 초기 state가 그 저장값을 읽습니다.

그림의 설명처럼 “추가 → 토글 → 삭제 → 새로고침”은 실습에서 확인하는 순서일 뿐, 실제 앱의 사용자는 세 동작을 각각 골라 씁니다. 또 모든 항목을 지운 뒤 새 항목을 추가하면 ID가 다시 1이 될 수 있지만, 현재 형제 목록 안에서는 여전히 고유합니다.

실습은 이 순서대로 확인합니다. 새로고침까지 확인하려면 삭제한 뒤에도 남는 항목이 있어야 합니다. 모든 항목을 지워 빈 목록만 확인하면, 저장된 항목이 다음 로딩에서 되살아나는지 구별하기 어렵기 때문입니다. 시작 조건으로는 다른 실습 데이터가 섞이지 않은 별도의 연습 프로젝트에서, 로컬 스토리지의 todoItems 키가 비어 있어야 합니다. 기존 데이터가 있다면 먼저 따로 보관하고, 처음 목록이 비어 있는지 확인하세요.

ID는 목록의 key로 쓰여 같은 항목을 이어 줍니다. 새로고침했을 때 이전의 메모리 상태가 남는 것이 아니라, 저장된 JSON을 초기 state로 다시 읽는다는 점도 구별하세요.

직접 해 보려면 위의 App.jsx와 TodoList.jsx 코드를 각 파일에 붙여 넣고, 개발 서버가 실행 중이 아니라면 프로젝트 폴더에서 npm run dev를 실행한 뒤 터미널에 나온 Local 주소를 브라우저에서 엽니다. 새 할 일을 입력해 추가 버튼을 누르고, 체크박스로 완료 상태를 바꿔 보고, 삭제 버튼으로 할 일을 지워 보세요. 페이지를 새로고침했을 때 목록이 남는지도 확인합니다. 10장에서 다룰 React Developer Tools 확장을 설치했다면 개발자 도구의 Components 탭에서 state와 props가 바뀌는 모습도 볼 수 있습니다.

간단한 Todo 앱도 입력값, 목록, 완료 여부, 삭제 흐름을 나눠 보면 React의 상태 갱신에서 쓰는 핵심 패턴을 익히기 좋습니다.

정리

• 입력 중인 초안 newTodo와 저장할 목록 todoItems를 서로 다른 state로 둡니다.
• 추가는 새 항목을 붙인 배열을, 토글은 map으로 대상만 복사한 배열을, 삭제는 filter로 대상을 뺀 배열을 만들어 setter에 넘깁니다.
• 새 항목의 ID는 현재 목록의 가장 큰 ID에 1을 더해 만들고, 목록의 key로 씁니다.
• 공백뿐인 입력은 trim()으로 걸러 내지만, 이 코드는 잘라 낸 값이 아니라 원래 입력을 저장합니다.
• 저장된 목록은 useState의 초기화 함수가 읽고, [todoItems] Effect가 바뀔 때마다 로컬 스토리지에 저장합니다.
• JSON을 파싱할 수 있다고 해서 Todo 배열의 형식까지 확인된 것은 아닙니다.

연습 문제

1. 지운 뒤의 새 ID

목록에 ID 4와 ID 7을 가진 두 항목이 있습니다. ID 7을 삭제한 뒤 새 항목을 추가하면 어떤 ID가 붙을까요?

2. 공백 세 칸

1번 다음에 입력칸에 공백 세 칸만 입력하고 추가 버튼을 누르면, 목록과 입력칸은 어떻게 될까요?

3. 앞뒤에 공백이 있는 입력

앞뒤에 공백이 있는 “ 복습 ”을 입력하고 추가하면, 저장되는 text에서도 공백이 잘려 나갈까요?

4. 저장값이 null이면

로컬 스토리지의 todoItems에 문자열 "null"이 저장되어 있을 때 이 앱을 열면 어떻게 될까요?

이것으로 3장을 마칩니다. 3장에서는 조건에 따라 다른 화면을 보여 주는 조건부 렌더링, 배열을 목록으로 그리는 리스트와 key, state와 연결한 폼, useEffect로 다루는 컴포넌트의 생명주기를 익히고, 이를 모아 할 일 목록 앱을 만들었습니다. 다음 장의 useState 심화부터는 useState와 useEffect를 더 깊이 살펴보고, useContext와 useReducer, 커스텀 훅까지 React의 훅을 차례로 익힙니다.