[스나이퍼팩토리] 한컴 AI아카데미 4기 9기 리덕스!(Redux)!

리덕스(Redux)는 리액트 생태계에서 가장 유명한 상태 관리 라이브러리입니다. 쉽게 말해, 애플리케이션의 모든 데이터를 한 곳에 모아두는 **'거대한 공용 창고'**라고 생각하시면 돼요.

처음 공부할 때는 용어가 낯설 수 있지만, **"상태 변화가 일어나는 흐름"**만 이해하면 금방 익숙해지실 거예요.

📦 리덕스의 4총사 (Core Concepts)

1. 스토어 (Store): 스토어 (공용 창고)
   • 애플리케이션의 모든 상태(데이터)가 저장되는 유일한 장소입니다.
2. 액션 (Action): 액션 (주문서)
   • 상태에 어떤 변화를 줄지 적혀 있는 주문서입니다. "로그인해줘!", "숫자 1 더해줘!" 같은 요청이죠.
3. 디스패치 (Dispatch): 디스패치 (주문 전달하기)
   • 액션(주문서)을 스토어로 보내는 행위 그 자체입니다.
4. 리듀서 (Reducer): 리듀서 (창고 관리자)
   • 주문서를 보고 창고의 물건을 실제로 바꾸는 관리자입니다. "이전 상태"와 "액션"을 받아서 **"새로운 상태"**를 만들어냅니다.

🛠️ 리덕스 생태계의 주요 라이브러리

라이브러리 이름 역할 (한 줄 요약) 쉬운 비유

react-redux	리액트와 리덕스를 연결	리액트와 리덕스 사이의 무지개다리
redux-actions	액션과 리듀서를 짧게 작성	긴 주문서를 요약해주는 비서
immer	불변성을 아주 쉽게 관리	마법의 복사기
redux-saga	비동기 작업(API 호출 등) 처리	까다로운 심부름을 대신 하는 전문 대리인
redux-devtools	상태 변화를 눈으로 확인	창고 안을 들여다보는 CCTV

💡 왜 이렇게 많이 쓰나요?

리덕스 하나만 쓰면 코드가 너무 길어지고 복잡해지기 때문입니다.

• *redux-actions*를 쓰면 switch 문을 안 써도 되고,
• *immer*를 쓰면 복사(...state)를 안 해도 되죠.
• Props Drilling 방지: 부모 컴포넌트가 수십 단계 아래 자식에게 데이터를 주기 위해 중간 컴포넌트들을 거칠 필요가 없습니다.
• 상태 추적 용이: 어떤 액션이 언제 발생해서 상태가 어떻게 변했는지 로그를 통해 한눈에 볼 수 있습니다.
• 유지보수 향상: 상태 관리 로직(리듀서)이 컴포넌트와 분리되어 있어 코드가 깔끔해집니다.

📚 리덕스의 3가지 핵심 원칙

리덕스를 제대로 쓰려면 이 세 가지 약속을 지켜야 합니다.

• 단일 진실 공급원 (Single Source of Truth): 애플리케이션의 모든 상태는 하나의 Store 안에 저장됩니다.
• 상태는 읽기 전용 (State is Read-only): 상태를 직접 수정하면 안 됩니다. 오직 Action이라는 객체를 통해서만 상태를 바꿀 수 있습니다.
• 변화는 순수 함수로 작성 (Changes are made with Pure Functions): 상태를 어떻게 바꿀지 결정하는 Reducer는 이전 상태와 액션을 받아서 새로운 상태를 반환하는 '순수 함수'여야 합니다.

---

예를 들어서 보겠습니다

 

1. 액션과 리듀서 만들기 (modules/write.js)

리덕스에서 상태를 바꾸려면 먼저 "무엇을 바꿀지" 정의해야 합니다.

import { createAction, handleActions } from 'redux-actions';

// 1. 액션 타입 정의: 어떤 변화를 줄 것인가?
const INITIALIZE = 'write/INITIALIZE'; // 글쓰기 페이지 나갈 때 초기화
const CHANGE_FIELD = 'write/CHANGE_FIELD'; // 제목이나 본문이 바뀔 때

// 2. 액션 생성 함수: "주문서" 만들기
export const initialize = createAction(INITIALIZE);
export const changeField = createAction(CHANGE_FIELD, ({ key, value }) => ({
  key,   // title 혹은 body
  value, // 입력한 내용
}));

const initialState = {
  title: '',
  body: '',
  tags: [],
};

// 3. 리듀서: "은행원" 역할. 주문서를 보고 상태를 업데이트함
const write = handleActions(
  {
    [INITIALIZE]: state => initialState, // 초기 상태로 되돌림
    [CHANGE_FIELD]: (state, { payload: { key, value } }) => ({
      ...state,
      [key]: value, // 특정 키값만 업데이트
    }),
  },
  initialState,
);

export default write;

2. 컴포넌트와 연결하기 (containers/write/EditorContainer.js)

이제 에디터에서 글을 쓰면 위에서 만든 changeField 액션을 실행(Dispatch)시켜야 합니다.

 

 

import { useEffect, useCallback } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import Editor from '../../components/write/Editor';
import { initialize, changeField } from '../../modules/write';

const EditorContainer = () => {
  const dispatch = useDispatch();
  // 스토어에서 상태 가져오기 (Selector)
  const { title, body } = useSelector(({ write }) => ({
    title: write.title,
    body: write.body,
  }));

  // 내용이 바뀔 때 액션을 디스패치함
  const onChangeField = useCallback(payload => dispatch(changeField(payload)), [
    dispatch,
  ]);

  // 페이지 언마운트 시 초기화
  useEffect(() => {
    return () => {
      dispatch(initialize());
    };
  }, [dispatch]);

  return <Editor onChangeField={onChangeField} title={title} body={body} />;
};

export default EditorContainer;

 

 

🧐 리덕스 흐름 한줄 요약 (Summary)

1. 사용자: 에디터에 글을 씀.
2. Dispatch: onChangeField 함수가 실행되면서 "제목(key)을 이거(value)로 바꿔줘!"라는 액션을 보냄.
3. Reducer: 리듀서가 기존 상태를 복사하고 제목 부분만 새 내용으로 갈아 끼운 새 상태를 만듦.
4. Store: 스토어의 데이터가 바뀌면, 이를 감시하던 컴포넌트들이 새 데이터를 받아 화면을 다시 그림.

---

백엔드 프로그래밍을  연습하면서 필히 만나게되는 프로그램이에요

리엑트, 리덕스, 몽고DB, 등등 아직 배우고 있는것들이 많아요 

KOA기반에서 연습하고있는데 버전문제나 기타 여러가지들이 힌들게 하네요

다음엔 좀더 실력이 늘기를 바랄뿐입니다

타자실력은 획실히 느는거 같긴해요 ㅎ 

 

 

본 후기는 [한글과컴퓨터x한국생산성본부x스나이퍼팩토리] 한컴 AI 아카데미 (B-log) 리뷰로 작성 되었습니다.

#한컴AI아카데미 #AI개발자 #AI개발자교육 #한글과컴퓨터 #한국생산성본부 #스나이퍼팩토리 #부트캠프 #AI전문가양성 #개발자교육 #개발자취업