[TIL #25] 231116_Redux 리팩토링, Payload

Bora.K | 권보라·2023년 11월 16일

React TIL

TIL

목록 보기

25/51

오늘 한 일

[개인Project] 팬레터함 만들기
- 프로젝트, 라우터 셋업
- 전역 스타일링 적용, 홈 및 상세페이지 화면 UI 구현
- 버튼 생성
오늘의 알고리즘 풀이

학습 내용

Redux 리팩토링

Action Creator, Action Values

우리가 만든 액션 객체의 value를 변경할 일이 생긴다면, 해당 액션 객체가 사용된 모든 부분을 하나 하나 변경해줘야 하는 번거로움이 있다. 이를 해결하기 위해 액션 객체를 한 곳에서 관리할 수 있도록 함수와 액션 value를 상수로 만들어서 사용할 수 있다.

Action Creator를 사용하는 이유

휴먼에러 방지 : value를 상수로 만들어서 자동완성 등의 보조 기능을 지원받을 수 있다.

유지보수의 효율성 증가 : value를 수정해야하는 상황에서, 한 번의 수정으로 가능하다.

코드의 가독성 : Action Creator가 한 곳에 정리되어 있어 모든 Action을 한 눈에 알 수 있다.

리덕스 공식 문서에서 권유하고 있는 방법

(1) 리듀서에서 Action Creator 만들기

// src/modules/counter.js

// (1) 액션 value를 상수들로 만든다.
const PLUS_ONE = "PLUS_ONE";
const MINUS_ONE = "MINUS_ONE";

// (2) Action Creator를 만들어 준다.
// plusOne()는 밖으로 나가서 사용될 예정이기 때문에 export 해준다.
export const plusOne = () => {
  return {
    type: PLUS_ONE,
  };
};

(2) Action Creator 사용하기

export된 Action Creator를 import 해준다.
dispatch() 안에 있던 액션 객체를 import한 Action Creator로 변경해준다.

// src/App.js

// 사용할 Action creator를 import 한다.
import { minusOne, plusOne } from "./redux/modules/counter";

const App = () => {
  const dispatch = useDispatch();
  const number = useSelector((state) => state.counter.number);

// dispatch의 액션 객체를 Action Creator로 변경한다.
  return (
    <div>
      {number}
      <button
        onClick={() => {
          dispatch(plusOne());
        }}
      >
        + 1
      </button>

      <button
        onClick={() => {
          dispatch(minusOne());
        }}
      >
        - 1
      </button>
    </div>
  );
};

export default App;

Redux의 Payload

1. payload란?

증가시킬 숫자를 카운터 프로그램을 사용하는 사용자가 직접 지정할 수 있게 하기 위해
증가시킬 숫자 N을 액션 객체에 담아 보내주게 되는데, 그것을 payload라고 한다.

(1) 사용자가 입력한 값을 받을 input 구현

type = “number”
input의 값을 state로 관리하기 위해 useState를 사용하고, 이벤트 헨들러와 연결

// src/App.js
const App = () => {
  const [number, setNumber] = useState(0);
// useState로 state 관리

  const onChangeHandler = (event) => {
    const { value } = event.target;
    setNumber(+value);
    	// event.target.value는 문자열
		// 이것을 숫자형으로 형변환 해주기 위해 +를 붙여준다.
		// setNumber(event.target.value)와 동일
  };

(2) counter.js 모듈 작성: Action Creator

// src/redux/modules/counter.js

// Action Value
const PLUS_N = "counter/PLUS_N";

// Action Creator
export const plusN = (payload) => {
  return {
    type: PLUS_N,
    payload: payload,
  };
};

(3) App.js에서

import React from "react";
import { useState } from "react";
import { useDispatch, useSelector } from "react-redux";

// 4. Action Creator를 import 합니다.
import { plusN } from "./redux/modules/counter";

const App = () => {
	// 1. dispatch를 사용하기 위해 선언
  const dispatch = useDispatch();
  const [number, setNumber] = useState(0);
  const counter = useSelector((state) => state.counter.number);

  const onChangeHandler = (event) => {
    const { value } = event.target;
    setNumber(+value);
  };

// 2. 더하기 버튼을 눌렀을 때 실행할 이벤트핸들러 생성
  const onClickAddNumberHandler = () => {
// 5. Action creator를 dispatch 해주고, Action creator의 인자에 number를 넣어준다.
    dispatch(plusN(number));
  };

  return (
    <div>
      <div>{counter.number}</div>
      <input type="number" onChange={onChangeHandler} />
			{/* 3. 더하기 버튼 이벤트핸들러를 연결*/}
      <button onClick={onClickAddNumberHandler}>더하기</button>
      <button>빼기</button>
    </div>
  );
};

export default App;

Ducks 패턴이란?
리덕스의 구성요소를 패턴화하여 작성하는 것

Reducer 함수를 export default 한다.>

Action creator 함수들을 export 한다.>

Action type은 app/reducer/ACTION_TYPE 형태로 작성한다.

오늘의 회고

React 심화 과정 개인 프로젝트로 팬레터함 만들기를 하고 있는데, 아직 활용이 쉽지 않다. 라우터로 페이지 나누고 이동하는 것까지는 강의를 보면서 만들었는데, 아직 styled-components 사용도 익숙하지 않고, props를 넘겨주고 받는 것도 어떻게 처리해야 할지 어렵게 느껴진다. 심지어 스타일 입히는 것도 자꾸 에러가 나고 막힌다 ㅠㅠ 우리 조원 두 분은 이전에 공부를 좀 하셨던 분들이라 벌써 과제를 다 하신 것 같은데.. 조급하다..
한 건 별로 없는데, 시간이 왜 이렇게 빨리 가는걸까 ㅠㅠ 코드 만지작 거리다보면 12시다. 피곤하다.