2024. 02. 04 redux_2

이번 과제에서 리덕스를 사용해서 상태 관리를 해야하는데

도대체 왜 사용해야 하는지 언제 어느 부분을 수정하면 좋을지 전혀 감이 오지 않았다.

 

그래서 알아본 것들을 기록해두고자 한다.😳

1. Redux 사용 시점

 

여러 컴포넌트에서 공유하는 상태가 많을 때

공유되는 상태가 많고, 이 상태들이 여러 컴포넌트에 걸쳐 있을 때
Redux는 중앙 집중식 상태 관리를 제공하여 코드를 더 깔끔하게 관리할 수 있도록 도와준다.

 

상태 업데이트 로직이 복잡할 때

상태 업데이트 로직이 여러 단계를 거치거나, 다양한 조건에 따라 상이할 경우
Redux의 미들웨어, 리듀서(reducer) 등을 사용하여 이러한 로직을 체계적으로 관리할 수 있다

 

상태의 일관성과 예측 가능성을 유지해야 할 때

Redux는 엄격한 규칙을 가지고 상태 변화를 관리하기 때문에,
애플리케이션의 상태가 예측 가능하며 일관성 있게 유지된다.

 

디버깅과 테스팅을 용이하게 하고 싶을 때: 

Redux는 상태 변화와 관련된 작업을 기록하고 재생할 수 있는 툴을 제공하기 때문에
디버깅과 테스팅을 용이하게 해준다.

 

---

 

2. 상태 관리 간소화의 필요성

❓useState 상태 변경 함수는 간단한 상태 변경에는 적합하지만,
     상태 로직이 복잡해지고 컴포넌트 간에 상태를 공유해야 할 때는 한계가 있다.

 

💡  상태 업데이트가 여러 단계를 거칠 때

상태를 업데이트하는 데 여러 단계가 필요하거나,
 다른 상태에 영향을 받는 경우, 이러한 로직을 관리하기 어려울 수 있다.

 

💡  상태 업데이트가 여러 단계를 거칠 때

상태를 업데이트하는 데 여러 단계가 필요하거나, 다른 상태에 영향을 받는 경우, 이러한 로직을 관리하기 어려울 수 있습니다.

 

💡  상태가 여러 컴포넌트에 의해 공유될 때

상태를 여러 컴포넌트에서 접근하고 업데이트해야 할 경우, Context API만으로는 이를 효율적으로 관리하기 어려워질 수 있습니다.

 

💡  상태 변경 로직이 중복될 때

비슷한 상태 변경 로직이 여러 컴포넌트에 중복되어 있는 경우, 이를 하나의 곳에서 관리하는 것이 유지보수에 더 좋습니다.

 

---

 

리듀서 간단하게 집고가기

 

Action

• Redux에서는 상태를 변경하기 위해 "action"을 사용한다.
• action은 type을 가진 javaScript객체이다.

 

Reducer

• action을 처리하는 함수이다.
• reducer는 현재상태(action을 적용하기 전 상태)와 액션을 인자로 받아 새로운 상태를 반환한다.

 

Store

• reducer에서 전체 애플리케이션의 상태를 보관하는 곳이다.
• reducer를 사용해 상태를 변경하고, 현재 상태를 조회할 수 있다.

 

⚠️

" 현재상태 " : 액션이 발생하는 시점에서의 상태

" 초기상태 " : 앱이 시작할때 스토어에 설정되는 상태로 reducer에 의해 처음 설정되어진다.

 

---

3. Redux 사용해보기

contextAPI에 있는 내용을 redux로 변경해 보자

import { createContext, useState } from "react";

const dummyData = [
  {
    id: "1",
    content: "너무 심각할 것 없어. 잘 될 거야, 시간을 가져.",
    nickname: "찰리 브라운",
    date: new Date("2024-02-03"),
    personName: "hwasa",
  },
  {
    id: "2",
    content: "추억을 생각해. 추억은 그대로 있는거야. 행복한 기억이야.",
    nickname: "스누피",
    date: new Date("2024-02-04"),
    personName: "wheEin",
  },
];

export const LetterContext = createContext();

const LetterProvider = ({ children }) => {
  const [letters, setLetters] = useState(dummyData);
  const [edit, setEdit] = useState(null);
  const [modal, setModal] = useState(false);

  const onDeleted = (id) => {
    setLetters((prevLetters) =>
      prevLetters.filter((letter) => letter.id !== id)
    );
  };

  const onEdit = (id) => {
    const findLetter = letters.find((letter) => letter.id === id);
    setEdit(findLetter);
    setModal(true);
  };

  const onSubmit = (nextLetter) => {
    setLetters((prevLetters) =>
      prevLetters.map((letter) => {
        if (nextLetter.id === letter.id) {
          return { ...letter, ...nextLetter };
        }
        return letter;
      })
    );
  };

  const onClose = () => {
    setModal(false);
  };

  return (
    <LetterContext.Provider
      value={{
        letters,
        setLetters,
        edit,
        setEdit,
        modal,
        setModal,
        onDeleted,
        onEdit,
        onSubmit,
        onClose,
      }}
    >
      {children}
    </LetterContext.Provider>
  );
};

export default LetterProvider;

 

① 설치하기

● redux와 react-redux 라이브러리 설치
📢 yarn add redux react-redux

 

 

② 파일 구조 만들기

reducer 폴더
🔽action 폴더
🔽reducer 폴더
🔽store 폴더

 

③ action 만들기

● action 폴더 안에 actionTypes.js 파일을 만들어 주었음.
● action type 정의해주기
● action 생성자 만들기

export const SET_LETTERS = "SET_LETTERS";
export const ADD_LETTERS = "ADD_LETTERS";
export const EDIT_LETTERS = "EDIT_LETTERS";
export const DELETE_LETTERS = "DELETE_LETTERS";
export const OPEN_LETTERS = "OPEN_LETTERS";
export const CLOSE_LETTERS = "CLOSE_LETTERS";

 

• SET : 특정 상태의 전체 값을 설정하거나 초기화 (dummy date를 초기값으로 두고 있음)
• ADD : 새로운 항목을 추가
• EDIT : 기존 항목을 수정
• DELETE : 항목 삭제
• OEPN : EDIT시 모달 열기
• CLOSE : EDIT시 모달 닫기

 

⚠️

SET action의 역할은 " 초기 데이터 로딩(dummy, API) ", " 데이터 리셋 ", " 데이터교체 " 

 

 

import * as types from "./actionTypes";

export const setLetter = (letters) => ({
  type: types.SET_LETTERS,
  payload: letters,
});

export const addLetter = (letter) => ({
  type: types.ADD_LETTERS,
  payload: letter,
});

export const editLetter = (id, newContent) => ({
  type: types.EDIT_LETTERS,
  payload: { id, newContent },
});

export const deleteLetter = (id) => ({
  type: types.DELETE_LETTERS,
  payload: id,
});

export const openLetter = () => ({
  type: types.OPEN_LETTERS,
});

export const closeLetter = () => ({
  type: types.CLOSE_LETTERS,
});

 

 

 

 

①②③④⑤