React Todoapp

이 글은 2026년 03월 14일 작성된 글입니다.

React 학습 과정에서 상태 관리와 컴포넌트 구조를 이해하기 위해 Todo App을 구현했다.
이번 프로젝트에서는 단순한 기능 구현보다는 컴포넌트 분리, 전역 상태 관리, localStorage를 이용한 데이터 유지를 직접 구현해보는 것에 초점을 두었다.

1. 프로젝트 소개

Todo App은 사용자가 할 일을 등록하고, 완료 여부를 체크하거나 삭제할 수 있는 간단한 애플리케이션이다.

이번 프로젝트에서는 다음과 같은 React 핵심 개념을 학습하는 것을 목표로 했다.

• 컴포넌트 역할 분리
• Context API 기반 전역 상태 관리
• Custom Hook을 통한 상태 로직 분리
• localStorage를 이용한 데이터 유지

2. 사용 기술

3. 구현 기능

• Todo 추가
• Todo 삭제
• Todo 완료 상태 토글
• Todo 수정
• localStorage를 통한 데이터 저장
• Context 기반 전역 상태 관리
• Custom Hook을 이용한 상태 로직 분리

4. 프로젝트 구조

src/
├─ components/
│  ├─ TodoItem.jsx      # 할 일 항목 UI (체크박스 + 삭제 버튼)
│  ├─ TodoList.jsx      # 할 일 목록 렌더링
│  └─ TodoWriteForm.jsx # 입력 폼 + 등록 버튼
├─ context/
│  └─ TodoContext.jsx   # 전역 상태관리 (useTodoContext())
├─ hooks/
│  └─ useTodos.js       # todo 상태 및 로직 (localStorage 동기화 포함)
├─ utils/
│  └─ storage.js        # localStorage 읽기/쓰기 유틸
├─ index.css            # Tailwind CSS 기본 스타일
└─ App.jsx              # 레이아웃 + 컴포넌트 조합

구조를 보면 UI / 상태 관리 / 로직 / 유틸을 분리하여 프로젝트를 구성했다.

5. 주요 구조 설명

components

UI를 담당하는 컴포넌트들을 모아둔 폴더이다.

• TodoItem
  할 일 항목을 렌더링하며 체크박스와 삭제 버튼을 제공한다.

• TodoList
  Todo 목록을 순회하며 TodoItem을 렌더링한다.

• TodoWriteForm
  새로운 할 일을 입력하고 등록하는 폼 컴포넌트이다.

context

Todo 상태를 전역에서 사용할 수 있도록 Context API를 활용했다.

export function useTodoContext() {
    const context = useContext(TodoContext)
    if (!context) {
        throw new Error('useTodoContext 호출 오류')
    }
    return context
}

Custom Hook 형태로 만들어 두면 컴포넌트에서 Context를 더 간결하게 사용할 수 있다.

hooks

Todo 관련 상태와 로직을 Custom Hook으로 분리했다.

useTodos.js

이 Hook에서는

• Todo 상태 관리
• Todo 추가
• Todo 삭제
• Todo 완료 토글
• localStorage 동기화

등의 로직을 처리한다.

utils

storage.js

localStorage 관련 로직을 유틸 함수로 분리했다.

• 데이터 읽기
• 데이터 저장

이렇게 분리하면 코드 재사용성과 가독성이 좋아진다.

6. 구현하면서 어려웠던 점

처음에는 상태 관리 로직이 컴포넌트 안에 섞여 있어서 코드가 복잡해졌다.

그래서 구조를 다시 정리하면서

• 상태 관리 → Custom Hook
• 전역 접근 → Context
• localStorage → utils

이렇게 역할을 분리하는 방식으로 개선했다.

이 과정을 통해 React 프로젝트에서 구조 설계가 얼마나 중요한지를 체감할 수 있었다.

7. 배운 점

이번 프로젝트를 통해 다음과 같은 점을 배울 수 있었다.

• Context API를 이용한 전역 상태 관리
• Custom Hook을 활용한 로직 분리
• localStorage를 통한 간단한 데이터 영속화
• 컴포넌트와 로직을 분리하는 구조 설계

작은 프로젝트였지만 React 애플리케이션의 기본 구조를 이해하는 데 도움이 되었다.

8. GitHub Repository

프로젝트 코드는 아래 GitHub에서 확인할 수 있다.

https://github.com/haxxru/react-todo-mession1

정리

이번 Todo App 프로젝트에서는 단순히 기능만 구현하는 것이 아니라 구조를 분리하고 상태 관리 방식을 이해하는 것에 집중했다.

특히

• Context API
• Custom Hook
• localStorage

를 함께 사용해보면서 React 프로젝트 구조를 조금 더 깊이 이해할 수 있었다.

앞으로는 다음과 같은 기능도 추가해볼 계획이다.

• 일괄 할 일 체크 및 삭제 기능
• 필터 기능 (전체 / 완료 / 미완료)
• UI 개선 (프로그래스바 등 진행상태 더 알아보기 쉽게 하기 위함)