📖 TIL - "Props Drilling 지옥에서 벗어나기" - Redux 완벽 가이드 🎯

📌 오늘의 학습

Redux를 통한 전역 상태 관리의 필요성, 기본 개념, 그리고 실제 구현 방법까지 학습했습니다.

💡 핵심 개념 정리

1. Redux의 필요성

• Local State의 한계

  • Props Drilling 문제
  • 상위 컴포넌트로의 데이터 전달 어려움
  • 여러 컴포넌트에서 같은 상태 공유 시 복잡도 증가

• Global State의 장점

  • 중앙 집중식 상태 관리
  • 컴포넌트 위치와 관계없이 상태 접근 가능
  • 예측 가능한 상태 변화

2. Redux의 동작 원리

// Store 설정
import { createStore } from 'redux';
import { Provider } from 'react-redux';

const store = createStore(rootReducer);

// Provider로 앱 감싸기
<Provider store={store}>
  <App />
</Provider>

// 컴포넌트에서 상태 사용
const number = useSelector(state => state.counter.number);
const dispatch = useDispatch();

3. Action과 Reducer

// Action Types
const ADD_NUMBER = "ADD_NUMBER";
const MINUS_NUMBER = "MINUS_NUMBER";

// Action Creators
export const addNumber = (payload) => ({
  type: ADD_NUMBER,
  payload,
});

// Reducer
const counter = (state = initialState, action) => {
  switch (action.type) {
    case ADD_NUMBER:
      return {
        number: state.number + action.payload,
      };
    default:
      return state;
  }
};

4. Redux의 데이터 흐름

1. View에서 Action 발생
2. Dispatch를 통해 Action 전달
3. Middleware 처리 (있는 경우)
4. Reducer에서 상태 변경
5. Store 업데이트
6. 구독 중인 컴포넌트 리렌더링

✨ 새롭게 배운 점

1. Redux 설정 과정

// 1. 패키지 설치
// npm install redux react-redux

// 2. 스토어 생성
// src/redux/config/configStore.js
const store = createStore(rootReducer);

// 3. Provider 설정
// index.js
<Provider store={store}>
  <App />
</Provider>

2. Ducks 패턴

• 모듈 구조

  // Action Types
  // Action Creators
  // Initial State
  // Reducer
  // export default reducer

• 장점

  • 관련 코드를 한 파일에서 관리
  • 모듈 간 의존성 감소
  • 유지보수성 향상

3. Payload 활용

// Action Creator with payload
export const addNumber = (payload) => ({
  type: ADD_NUMBER,
  payload,
});

// 컴포넌트에서 사용
const onClickAddNumberHandler = () => {
  dispatch(addNumber(5));
};

🚀 실제 적용 포인트

1. 상태 관리 전략

   • Local State vs Global State 결정
   • 적절한 상태 분리와 모듈화

2. 성능 최적화

   • 불필요한 리렌더링 방지
   • 효율적인 상태 구조 설계

3. 협업 관점

   • 일관된 코드 구조 (Ducks 패턴)
   • 명확한 네이밍 컨벤션

⭐️ 다음 학습 목표

• Redux Toolkit 활용
• 비동기 작업 처리

Redux를 배우고 나니 "아, 이래서 다들 Redux를 쓰는구나!" 하는 생각이 확 들었습니다.
Props Drilling 없이 깔끔하게 상태 관리할 수 있다니... 최고! 😆