React로 TaskFlow 만들기: 32편 동안 완성하는 작업 관리 앱

이 글은 TaskFlow 학습 과정 안내입니다. 필요한 주제를 골라 읽거나, 각 회차의 선택 실습에서 프로젝트를 이어 만들 수 있습니다.

작업 관리 앱을 만들며 React를 어떤 순서로 배우나요?

React 과정은 작은 작업 목록에서 시작해 입력·상태·검색·라우팅을 갖춘 TaskFlow 앱으로 확장합니다. 컴포넌트와 JSX를 익힌 뒤 state, Effect, 폼, 비동기 UI, 성능 측정 순서로 진행합니다.

공식 문서 참고: React 공식 빠른 시작: 컴포넌트·목록·이벤트·상태 · React Hook Form: 입력 등록과 폼 검증 · TanStack Query: 서버 상태의 조회·캐시·동기화

이 과정에서 무엇을 만드나요?

최종 결과물은 React + TypeScript + Vite 기반의 TaskFlow입니다.

과정이 끝나면 다음 기능과 구조가 들어갑니다.

TaskFlow

작업 추가
작업 완료 / 취소
작업 삭제
state 초기화용 편집 입력 연습
검색
상태 필터
폼 validation

↓

상태 구조 개선

props
state
state lifting
reducer + Context
custom Hook

↓

비동기 UI

lazy
Suspense
useTransition
useDeferredValue
useActionState
useOptimistic

↓

서비스 화면 확장

React Router
/tasks
/tasks/:id
/settings

↓

UI 구성

shadcn/ui
Dialog
Popover
공통 UI

↓

성능 검증

React DevTools Profiler
React Compiler

단순 Todo 예제를 여러 번 만드는 것이 아니라 하나의 TaskFlow를 계속 수정하면서 React 기능을 추가합니다.

시작할 때와 끝났을 때

처음

React + TypeScript + Vite

App
└─ 화면에 TaskFlow 제목만 표시

아직 컴포넌트 구조도, state도, 라우팅도 없습니다.

32편 완료 후

TaskFlow React SPA

├─ Components
│  ├─ TaskForm
│  ├─ TaskList
│  ├─ TaskItem
│  ├─ TaskCard
│  ├─ Search / Filter
│  └─ 공통 UI
│
├─ State
│  ├─ local state
│  ├─ reducer
│  ├─ Context
│  └─ custom Hook
│
├─ Forms
│  └─ React Hook Form
│
├─ Async UI
│  ├─ lazy / Suspense
│  ├─ transition
│  ├─ deferred value
│  └─ optimistic UI
│
├─ Routes
│  ├─ /tasks
│  ├─ /tasks/:id
│  └─ /settings
│
└─ Performance
   ├─ Profiler
   └─ React Compiler

중요한 것은 기능 수가 아닙니다.

32편을 지나면서 다음 질문에 스스로 답할 수 있는 것이 목표입니다.

이 상태는 어느 컴포넌트가 가져야 할까?
props로 전달할까, Context를 쓸까?
계산 가능한 값을 state로 만들어야 할까?
Effect가 정말 필요한가?
컴포넌트 state는 왜 유지되거나 초기화되는가?
비동기 작업 중 UI를 어떻게 유지할까?
Router는 언제 필요한가?
라이브러리를 추가해야 할 이유가 있는가?
지금 최적화가 필요한가?

TaskFlow는 이렇게 발전합니다

1단계 · React 화면 구조

컴포넌트
↓
JSX
↓
props
↓
children / composition

화면을 작은 단위로 나누고 데이터를 부모에서 자식으로 전달합니다.

2단계 · 상태와 사용자 입력

useState
↓
state 업데이트
↓
list key
↓
state 보존 / 초기화
↓
controlled form
↓
useRef

정적인 작업 목록이 실제 사용자의 입력에 반응하는 앱으로 바뀝니다.

3단계 · Effect와 상태 구조

useEffect
↓
StrictMode
↓
useEffectEvent
↓
Effect 오류 해결
↓
useReducer + Context
↓
custom Hook

외부 시스템과 동기화하는 코드와 앱 자체 상태 변경 로직을 분리합니다.

4단계 · 실제 폼과 검색

props TypeScript 설계
↓
React Hook Form
↓
validation
↓
검색 / 필터

5단계 · 현대 React 비동기 UI

lazy + Suspense
↓
useTransition
↓
useDeferredValue
↓
useActionState
↓
useOptimistic

화면이 커지고 비동기 작업이 생겨도 입력 반응성과 사용자 피드백을 유지하는 방법을 배웁니다.

6단계 · SPA 구조

React Router
↓
/tasks
/tasks/:id
/settings

하나의 화면이었던 TaskFlow를 URL을 가진 SPA로 발전시킵니다.

7단계 · UI와 성능

shadcn/ui
↓
복합 UI
↓
Profiler
↓
React Compiler

기능을 만드는 데서 끝내지 않고 실제 렌더링 비용을 측정하고 최적화 여부를 판단합니다.

두 가지 방식으로 공부할 수 있습니다

방법 1 · 필요한 주제만 공부

예를 들어 Maximum update depth exceeded 오류만 해결하고 싶다면 해당 글로 바로 들어가도 됩니다.

필요한 주제의 글에서 개념과 예제를 먼저 확인하고, 누적 프로젝트 절은 해당 과정을 이어 갈 때 활용하세요.

검색으로 글 방문
↓
상단 개념 설명
↓
최소 예제
↓
오류 원인
↓
해결 기준

하단 TaskFlow 실습은 건너뛰어도 됩니다.

방법 2 · 1편부터 프로젝트를 이어서 공부

React를 처음부터 학습한다면 각 글의 하단 TaskFlow를 계속 이어서 개발합니다.

1편
step-01-first-run

↓

2편
step-02-vite-base

↓

...

↓

32편
step-32-compiler

각 회차는 직전 체크포인트의 프로젝트 상태에서 시작합니다.

지금 어디서 시작하면 되나요? 3분 경로 선택

이 글의 답: React를 처음 배우는지, 이미 만든 화면의 문제를 고치는지에 따라 첫 글이 다릅니다. 아래에서 자신의 상황 하나를 고르고, 링크한 글의 최소 예제를 먼저 확인하세요. TaskFlow 누적 실습은 그다음 선택입니다.

컴포넌트와 state가 낯설다 → 1편 React 학습 순서. 목표: 컴포넌트, props, state를 어떤 순서로 배울지 말할 수 있다.
버튼을 눌러도 목록이 바뀌지 않는다 → React useState. 목표: 기존 배열을 직접 바꾸지 않고 새 배열로 상태를 갱신할 수 있다.
API 호출이나 타이머를 화면과 맞춰야 한다 → React useEffect. 목표: 렌더 중 계산과 외부 시스템 동기화를 구분한다.
Maximum update depth exceeded가 뜬다 → 무한 렌더링 오류. 목표: 반복되는 state 갱신 위치를 찾아 원인을 설명한다.

스스로 확인: “할 일 추가 버튼을 눌렀는데 화면에 새 항목이 나타나지 않는다”면 어느 글부터 읽을까요? 답은 useState 글입니다. 클릭 후 상태를 어떻게 갱신하는지부터 재현하세요. 오류 메시지가 이미 Maximum update depth exceeded라면 오류 글로 바로 이동합니다.

이 과정을 추천하는 사람

JavaScript 기초를 공부했고 React를 시작하려는 사람
React 문법은 봤지만 프로젝트 흐름이 연결되지 않는 사람
useState, useEffect를 쓰지만 상태 위치를 결정하기 어려운 사람
React Router, React Hook Form, Suspense까지 하나의 프로젝트에서 연결해 보고 싶은 사람
React 다음에 Next.js·Zustand·TanStack Query를 공부할 계획인 사람

시작 전에 필요한 내용

최소한 다음 JavaScript 문법을 읽을 수 있으면 좋습니다.

함수
객체와 배열
map / filter
구조 분해
spread
import / export
async / await 기본

TaskFlow는 처음부터 TypeScript를 사용합니다.

React 이후에는 무엇을 하나요?

React 과정이 끝나면 같은 TaskFlow가 다른 과정으로 이어집니다.

TaskFlow 후속 학습
각 과정에서 지정한 체크포인트로 시작

├─ Zustand
│  → 클라이언트 전역 상태관리
│
├─ TanStack Query
│  → 서버 상태관리
│
└─ Next.js
   → 실제 서비스 구조
   → Server Component
   → API
   → 인증
   → 캐시
   → SEO

Next.js는 TaskFlow를 App Router 기반으로 확장합니다. Zustand는 React의 step-18-reducer-context에서 시작하며, TanStack Query는 Next.js의 next-step-17-route-handler를 기반으로 합니다. 후속 과정의 시작 체크포인트는 각 과정 안내를 따릅니다.

이 과정에서 중요한 기준

이 과정의 목표는 Hook 사용 개수를 늘리는 것이 아닙니다.

기능을 만든다
↓
문제가 생긴다
↓
원인을 이해한다
↓
구조를 수정한다
↓
다음 기능을 추가한다

이 흐름을 반복하면서 React가 왜 특정 API를 제공하는지 이해하는 것이 목표입니다.

이제 시작합니다

정규 학습은 1편부터 시작합니다.

다음 글:
React 학습 순서와 TaskFlow 시작

0편
무엇을 만들지 확인

↓

1편
직접 시작

전체 학습 순서

글 소개·학습 준비·전체 목차

React · 0/32 · TaskFlow 누적 실습

React로 TaskFlow 만들기: 32편 동안 완성하는 작업 관리 앱

회차 표기: 과정 목록의 전체 33편에는 이 0편 안내가 포함됩니다. 실제 TaskFlow 누적 실습은 1~32편, 총 32회입니다.

React 0편 · 과정 오리엔테이션 · TaskFlow 미리보기

React를 공부할 때 Hook 이름을 순서대로 외우는 것보다 더 중요한 것은 “이 기술을 써서 무엇을 만들게 되는가”를 먼저 아는 것입니다.

이 과정에서는 처음부터 거대한 서비스를 만들지 않습니다.

처음에는 아주 단순한 작업 목록으로 시작합니다.

TaskFlow

오늘 할 일
- React 공부하기
- 컴포넌트 나누기

그리고 32편을 지나면서 이 작은 화면을 실제 SPA 형태의 작업 관리 앱으로 발전시킵니다.

이 글은 정규 학습 회차가 아닙니다.

0편
과정 소개 · 결과물 미리보기

1~32편
실제 React 학습 + TaskFlow 누적 개발

이 글이 도움이 되었나요?

조회 중

읽음 기록

읽음 — / 전체 33개 · 필수 27개

이 글을 쓴 해비

웹사이트를 제작·운영하고, 개인 서비스와 자동화·AI 도구를 만듭니다. 직접 만들며 배운 내용과 문제 해결 과정을 BlogFlow에 기록합니다.

새 글 받아보기

RSS 리더에서 BlogFlow의 새 글을 확인할 수 있습니다.

RSS 피드 구독하기