통합 요약노트
Ch.12 React 상태 관리 — 살아 움직이는 UI
useState, 이벤트 처리, useEffect, 투두 앱 프로젝트
이 챕터의 내용
useState — 변하는 데이터
useState — React에게 '이 데이터가 바뀌면 화면을 다시 그려줘'라고 알려주는 Hook입니다.
일반 변수를 바꿔도 React는 화면을 다시 그리지 않습니다
useState는 [현재값, 변경함수] 두 가지를 반환합니다
관련 없는 데이터는 별도의 state로 분리합니다
- useState = [현재값, 변경함수], 초기값을 인자로 전달
- setter 함수 호출 → React가 리렌더링 → 화면 자동 갱신
- 독립적인 데이터는 별도의 useState로 분리
이벤트와 폼 처리
Controlled Component — input의 값을 state로 제어하여 React가 모든 데이터를 관리하게 합니다.
React 이벤트는 camelCase로 작성하고 함수 자체를 전달합니다
input의 value를 state로 제어하면 입력값을 완벽하게 관리할 수 있습니다
form의 onSubmit에서 preventDefault로 기본 동작을 막습니다
- React 이벤트는 camelCase, 함수 참조를 전달 (괄호 붙이지 않기!)
- Controlled Component = value + onChange + state 연결
- 폼 제출: onSubmit + e.preventDefault() + 유효성 검사
useEffect — 외부 세계와 연결
useEffect — 컴포넌트의 생명주기에 맞춰 부수 효과를 실행하는 Hook입니다.
useEffect는 렌더링이 끝난 후 실행되는 '부수 효과'입니다
의존성 배열로 useEffect의 실행 조건을 제어합니다
useEffect + fetch + useState로 외부 데이터를 가져와 표시합니다
- useEffect = 렌더링 후 실행되는 부수 효과 처리 Hook
- 의존성 배열: 없음(매번), [](1회), [값](값 변경 시)
- API 패턴: data + loading + error state + useEffect fetch
미니 프로젝트 — 투두 앱
컴포넌트 설계 — 기능별로 컴포넌트를 나누고, state를 적절히 배치하는 것이 React의 핵심입니다.
먼저 전체 구조를 설계하고 컴포넌트를 나눠봅시다
전체 앱의 구조와 state 설계를 살펴봅시다
배열을 변경할 때는 새 배열을 만들어야 합니다 (불변성)
- Ch11-1: React = 컴포넌트 기반 UI 라이브러리, SPA로 빠른 사용자 경험
- Ch11-2: JSX = JS 안의 HTML, Props = 부모→자식 데이터 전달
- Ch11-3: map()으로 리스트 렌더링, key로 요소 식별, 조건부 렌더링 3패턴
- Ch12-1: useState = 상태 관리 Hook, setter 호출 → 리렌더링
- Ch12-2: 이벤트 핸들링 + Controlled Component + 폼 처리
- Ch12-3: useEffect = 부수 효과 처리, 의존성 배열로 실행 조건 제어
- Ch12-4: 투두 앱 — CRUD, 컴포넌트 분리, 불변성 원칙, 상태 끌어올리기
- 이제 React로 실제 웹 애플리케이션을 만들 수 있습니다!
핵심 용어 모음
의존성 배열 없음
useEffect(() => { ... }) — 매 렌더링마다 실행 (거의 사용 안 함)
빈 배열 []
useEffect(() => { ... }, []) — 마운트 시 1회만 실행 (API 호출)
값 배열 [a, b]
useEffect(() => { ... }, [a, b]) — a 또는 b가 바뀔 때만 실행
TodoApp
최상위 컴포넌트 — todos state를 관리, 자식에게 props 전달
TodoForm
입력 폼 — 새 할 일 텍스트 입력과 추가 버튼
TodoList
목록 영역 — TodoItem 컴포넌트를 map()으로 렌더링
TodoItem
개별 할 일 — 완료 토글, 삭제 버튼 포함
퀴즈와 인터랙션으로 더 깊이 학습하세요
play_circle인터랙티브 코스 시작하기