[250203] 리덕스 크악

김경민·2025년 2월 3일

목록 보기

28/64

오늘은 Redux를 간단히 사용해 보았습니다.
Redux는 React 프로젝트의 전역 상태를 관리하기 위해 Flux 아키텍쳐를 기반으로 제작하여 단방향 데이터 흐름을 통해 복잡한 상태 관리를 해결하여 데이터 흐름을 더 직관적이고 관리하기 쉽게 만든 라이브러리 입니다.

Flux 아키텍쳐 구성

Action이 생기면 Dispatcher에서 그 행동을 감지하여 Store에 전달해주고
Store가 변경되면 View에서 감지하여 사용자에게 변화를 표현하고 또 다른 Action을 할 수도 있는 구조입니다.

Redux는 위 아키텍쳐를 기반으로 제작 되어 유사성을 띄고 있습니다.

Redux 핵심 요소

Store : 전체 상태를 저장하는 단일 객체로 SSOT 원칙을 따르며 Read Only 요소입니다.
Action : 상태 변경을 요청하는 이벤트로 객체의 형태를 가지고 있으며 type을 가지며 payload를 포함 할 수 있습니다. payload는 부가 데이터로 간단히 함수의 인자라고 생각하면 쉽습니다.
Reducer : 순수 함수로 현재 상태와 Action을 받아 새로운 상태로 반환합니다. side effect가 없습니다.

Redux 예시 코드

//Store 생성하기
import { createStore } from "redux";



const store = createStore(temp);

export default store;

상태를 저장하는 단일 객체로 createStore()함수를 통하여 생성합니다.

//Action 정의하기
const TEMP_ACTION = "TEMP_ACTION";

export const tempAction = (payload) => {
	return {
    	type: TEMP_ACTION,
      	payload: payload;
    	};
};

액션 종류를 정의하여 상태를 바꾸는 함수를 실행합니다.

//Reducer 정의하기
const initialValue = [
  {
    id: 1,
    content: "첫 번째 입니다."
  },
  {
    id: 2,
    content: "두 번째 입니다."
  },
];

const hello = (state = initialValue, action) => {
	switch (action.type) {
      case TEMP_ACTION:
        return [...state, action.payload]
      default:
        return state;
    }
};

export default hello

TEMP_ACTION이라는 액션을 미리 정의해두어 액션이 발생할 때, 새로운 객체를 반환합니다.

이렇게 Redux의 핵심 개념들을 코드로 제작해 보았습니다.
하지만 이런 코드들만 있으면 상태를 관리한다라고 표현할 수가 없습니다.

상태 변화를 주고 관리를 해주기 위해 useDispatch()라는 훅을 사용해주어야 합니다.

//dispatch 사용하여 Action 전달하기
const dispatch = useDispatch();

<button onClick={()=>{ // 버튼을 클릭 시 dispatch()를 실행하여 내부의 내용을 Reducer에 전달
  dispatch(
    tempAction({ // dispatch 내부 내용으로 정의된 Action 함수를 실행하여 내부 객체 전달
      id: uuidv4(),
      content: "임시 액션을 실행하였습니다.",
    });
  }}
>
임시 버튼
</button>