[React 상태관리 완전정복] 데이터 흐름부터 전역 상태까지 단계별 학습

다음은 React 상태관리 강의안입니다. 초급~중급 수강생을 대상으로, 상태의 개념부터 주요 관리 방법(useState, useReducer, Context API, 전역 상태관리 라이브러리 등)까지 연역적으로 구성했습니다. 학습 목적은 UI와 데이터 흐름의 연결 원리를 명확히 이해하고, 적절한 상태관리 기법을 적용할 수 있는 역량 확보입니다.

 

강의 구성 개요

회차 주제 주요 키워드

1강	상태란 무엇인가?	상태(state), UI 갱신, 컴포넌트 렌더링
2강	useState로 상태관리 시작	useState, 초기값, setter함수
3강	상태와 이벤트 연결하기	onClick, onChange, 상태변경, 렌더링
4강	상태 끌어올리기(Lifting State Up)	부모-자식 간 상태 공유
5강	여러 상태 다루기 & 객체/배열 상태관리	복합 상태, 불변성 유지
6강	useReducer를 활용한 구조적 상태관리	상태와 액션 분리, reducer함수
7강	Context API로 전역 상태관리 기초	전역 공유, Provider, useContext
8강	전역 상태관리 라이브러리 소개	Redux, Recoil, Zustand 비교
9강	실습: Context + useReducer로 로그인 상태 관리하기	로컬 상태 vs 전역 상태
10강	상태관리 전략 종합 정리	상태 분류, 책임 분리, 선택 기준

회차별 강의안 상세

1강. 상태란 무엇인가?

개념 정의

• 상태(state)란? 컴포넌트 내부에서 변할 수 있는 데이터
• 상태에 따라 UI가 변화함 → 데이터의 상태에 따라 UI를 관리하는 것이 상태관리임

예시

const [count, setCount] = useState(0);

핵심 포인트

• 상태 = 숫자, 문자열, 객체, 배열 등 변할 수 있는 값
• 상태가 변경되면 컴포넌트는 자동으로 리렌더링

 

2강. useState로 상태관리 시작

핵심 문법

const [value, setValue] = useState(초기값);

예제: 카운터

const [count, setCount] = useState(0);
<button onClick={() => setCount(count + 1)}>+1</button>

요점

• useState는 가장 기본적인 상태관리 Hook
• setter 함수를 통해 상태를 변경하고 UI를 갱신

3강. 상태와 이벤트 연결하기

핵심 개념

• 사용자의 상호작용 → 이벤트 발생 → 상태 변화 → UI 갱신

예제: input 상태 반영

<input value={text} onChange={(e) => setText(e.target.value)} />

4강. 상태 끌어올리기 (Lifting State Up)

개념

• 여러 컴포넌트가 공유해야 하는 상태는 공통 부모로 끌어올려 관리

구조 예시

Parent
 ├─ ChildA (입력)
 └─ ChildB (출력)

5강. 객체와 배열 상태 다루기

문제점

• 객체/배열은 불변성을 유지하지 않으면 UI가 갱신되지 않음

해결방법

• spread 연산자 사용

setUser({ ...user, name: 'Lee' });

6강. useReducer로 복잡한 상태 관리

구조적 패턴

const [state, dispatch] = useReducer(reducer, 초기값);

Reducer 예시

function reducer(state, action) {
  switch(action.type) {
    case 'increment':
      return { count: state.count + 1 };
  }
}

7강. Context API로 전역 상태 관리

구성 요소

• Context 생성 → Provider로 감싸기 → useContext로 사용

예제

const AuthContext = createContext();

주의점

• 상태변화가 많을 경우, 성능 이슈 유발 가능

8강. 상태관리 라이브러리 비교

라이브러리 특징

Redux	명확한 구조, 규모 있는 앱에 적합
Recoil	React 친화적, atom 기반
Zustand	간결한 API, 작은 앱에 적합

9강. 실습: 로그인 상태 관리

• 로그인 여부를 Context + useReducer로 관리
• 로그인/로그아웃 버튼 토글 처리

10강. 상태관리 전략 정리

단계 요약

1. 로컬 상태: useState, useReducer
2. 공유 상태: 상태 끌어올리기
3. 전역 상태: Context API
4. 대규모 앱: 외부 상태관리 라이브러리

선택 기준

• 상태의 범위, 복잡성, 재사용성 고려

부가자료 제공

• 상태관리 흐름도 도식
• 상태관리 방식별 코드 템플릿
• 선택 가이드 PDF

 

💬 댓글

이번 글이 도움이 되었길 바랍니다. 궁금한 점이나 요청이 있다면 언제든 댓글로 남겨주세요. 댓글은 저에게 큰 힘이 됩니다. 다음 글도 기대해주세요.