Redux 적용

🏃🏻‍♂️ 기존 프로젝트는 상태관리 도구 사용 없이 컴포넌트에 Props를 전달하여 사용했다.

<Editor
   setModal={setModal}
   selected={selected}
   setSelected={setSelected}
   elStage={elStage}
   initialItem={initialItem}
   initialOnChange={setInitialItem}
   />
----------
function Editor({ initialItem, elStage, initialOnChange, setSelected, selected, setModal }) {...}

뿐만 아니라 컴포넌트에서 컴포넌트로 Props 지옥을 겪었다.

해당 문제를 해결하기 위해 Redux를 사용했다.

아래는 상태관리를 위한 ts 파일이다.

import { createSlice } from "@reduxjs/toolkit";

export interface PositionType {
  isDragging: boolean;
  width: number;
  height: number;
  x: number;
  y: number;
}

export interface DesignType {
  label: string;
  preview: string;
  positions: PositionType;
}

export interface InitialItemType {
  color: string;
  designs: DesignType[];
}

const initialState: InitialItemType = {
  color: "white",
  designs: [
    {
      label: "main_logo",
      preview: "",
      positions: {
        isDragging: false,
        width: 144,
        height: 139,
        x: 0,
        y: 0,
      },
    },
    {
      label: "setOne_logo",
      preview: "",
      positions: {
        isDragging: false,
        width: 144,
        height: 139,
        x: 0,
        y: 0,
      },
    },
    {
      label: "setTwo_logo",
      preview: "",
      positions: {
        isDragging: false,
        width: 144,
        height: 139,
        x: 0,
        y: 0,
      },
    },
  ],
};

export const initialSlice = createSlice({
  name: "initialItem",
  initialState,
  reducers: {
    dragstart: (state) => {
      state.designs[0].positions.isDragging = true;
    },
    dragend: (state, action) => {
      state.designs[0].positions = action.payload;
    },
    change: (state, action) => {
      state.designs[0].positions = action.payload;
    },
    changecolor: (state, action) => {
      state.color = action.payload;
    },
    changedesign: (state, action) => {
      state.designs = action.payload;
    },
    changepreview: (state) => {
      state.designs[0].positions.isDragging = true;
    },
  },
});

export const { dragstart, dragend, change, changecolor, changedesign } = initialSlice.actions;

export default initialSlice.reducer;

redux를 사용하면서 추가로 데이터 관리도 분리할 수 있었다.
redux의 dispatch는 기존 데이터를 수정하던 코드를 매우 간단하게 해줬다.

onDragStart={() => {
          onChange({
            ...data,
            designs: data.designs.map((arg) => {
              return arg.label === "main_logo"
                ? {
                    ...data.designs[0],
                    positions: {
                      ...data.designs[0].positions,
                      isDragging: true,
                    },
                  }
                : arg;
            }),
          });
        }}
        
----------------------------------------------------
 onDragStart={() => {
          dispatch(dragstart());
        }}

위 코드 처럼 boolean 값 하나를 바꾸기 위한 16줄의 코드를 3줄의 코드로 바꿀 수 있었다.

Redux 사용을 통해 얻은 이점
1. props 지옥 탈출
2. redux에서 데이터와 데이터 변경을 위한 함수 따로 관리하여 코드 효율, 가독성 증가