11.Redux 완전 정복: 중앙 집중식 상태 관리의 기본

React/React Core

11.Redux 완전 정복: 중앙 집중식 상태 관리의 기본

코딩쉐프 2024. 11. 27. 15:37

728x90

"Redux 완전 정복: 중앙 집중식 상태 관리의 기본"

1시간 분량 강의안 (Redux 기초)

강의 목표

Redux의 개념과 필요성을 이해한다.
Redux의 주요 개념(스토어, 액션, 리듀서)을 학습한다.
Redux를 활용한 간단한 상태 관리 애플리케이션을 구현한다.

강의 목차

1. Redux란 무엇인가? (10분)

Redux의 정의

Redux는 JavaScript 애플리케이션을 위한 상태 관리 라이브러리입니다.
애플리케이션의 상태를 중앙 집중식 스토어에 저장하여, 상태 관리의 일관성을 유지합니다.

Redux의 필요성

React 컴포넌트 간 Props Drilling을 해결.
상태 관리가 복잡한 대규모 애플리케이션에서 데이터를 효율적으로 관리.

Redux의 3가지 핵심 원칙

Single Source of Truth:
- 모든 상태는 하나의 스토어에 저장됩니다.
State is Read-Only:
- 상태는 불변하며, 오직 **액션(Action)**을 통해 변경됩니다.
Changes are Made with Pure Functions:
- 상태 변경은 **순수 함수(Pure Function)**인 리듀서(Reducer)를 통해 이루어집니다.

2. Redux 주요 구성 요소 (15분)

1단계: 스토어(Store)

상태가 저장되는 중앙 데이터 저장소.
스토어 생성:

import { createStore } from 'redux';

const store = createStore(reducer);

2단계: 액션(Action)

상태를 변경하기 위해 디스패치되는 순수 JavaScript 객체.
액션 생성:

const incrementAction = { type: 'INCREMENT' };

3단계: 리듀서(Reducer)

현재 상태와 액션을 받아 새로운 상태를 반환하는 순수 함수.
리듀서 예제:

function counterReducer(state = { count: 0 }, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

Redux 데이터 흐름

UI에서 액션을 디스패치.
리듀서가 액션을 처리하여 새로운 상태를 반환.
스토어가 상태를 업데이트하고, UI가 다시 렌더링.

3. Redux 기본 구현 (20분)

1단계: 프로젝트 설정

Redux 설치:

npm install redux react-redux

2단계: 스토어 생성 및 리듀서 연결

스토어 생성:

import { createStore } from 'redux';

const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

const store = createStore(counterReducer);

export default store;

3단계: React 컴포넌트에서 Redux 사용

Provider 설정:

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';

const root = createRoot(document.getElementById("root"));

root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

상태 사용 및 디스패치:

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';

function Counter() {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'DECREMENT' })}>Decrement</button>
    </div>
  );
}

export default Counter;

4. 실습 과제 (10분)

실습 과제

Redux를 사용하여 카운터 애플리케이션을 구현하세요.
버튼 클릭으로 숫자를 증가/감소하고, 숫자가 0보다 작아지지 않도록 제한하세요.

예제

function counterReducer(state = { count: 0 }, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: Math.max(0, state.count - 1) }; // 최소값 제한
    default:
      return state;
  }
}

5. Q&A 및 정리 (10분)

Q&A:
1. Redux는 어떤 상황에서 사용하는 것이 적합한가요?
2. Context API와 Redux의 차이는 무엇인가요?
요약:
- Redux는 대규모 애플리케이션에서 상태 관리를 일관되게 처리하기 위한 강력한 도구입니다.
- 스토어, 액션, 리듀서의 개념을 이해하고, React와의 연동을 통해 효율적인 상태 관리를 구현할 수 있습니다.

728x90