(React)카운터 Redux로 만들기 - 5

가장 기본 예제인 카운터를 redux를 이용해 만들어 볼 거다
항상 리덕스를 사용할 줄 모르는 것에 부끄러움이 가득했는데 이번 기회에 타파할 예정이다.
참고 유데미 강의
React 완벽 가이드 with Redux, Next.js, TypeScript

 

(React)카운터 Redux로 만들기 - 4

그전 코드는 위에 글을 가면 확인할 수 있습니다.

 

이번글에서 카운터를 보여줬다고, 숨겼다가 하는 기능을 추가할 예정이다.

 

Counter.js

 

import { legacy_createStore } from 'redux';

const initialState = { counter: 0, counterShow: true };
const counterReducer = (state = initialState, action) => {
  if (action.type === 'increment') {
    return {
      ...state,
      counter: state.counter + 1,
    };
  }
  if (action.type === 'increase') {
    return {
      ...state,
      counter: state.counter + action.payload,
    };
  }

  if (action.type === 'decrement') {
    return {
      ...state,
      counter: state.counter - 1,
    };
  }
  if (action.type === 'showSwitch') {
    return {
      ...state,
      counterShow: !state.counterShow,
    };
  }
  return state;
};
const store = legacy_createStore(counterReducer);

export default store;

 

코드에서 확인하면 initialState라는 객체를 추가해서 기존의 state의 넣어주는 기본값을 깔끔하게 옮기고, counterShow를 추가하고 기본 값으로 true를 넣어줬다. 왜냐하면 처음에는 카운터가 보여하니까

그리고 return 값 뒤에 스프레드 연산자를 활용해서 state , 후 내가 원하는 action 변화를 주었다.

    if (action.type === 'increment') {
  state.counter++;
    return state
  }
 
  
  if (action.type === 'increment') {
  state.counter++;
    return {
counter: state.counter,
      counterShow: state.counterShow
    };
  }

이번 강의를 들고 알게 된점이다. 사실 위에 코드 처럼 해도 잘동작이 된다.

근데 위의 코드를 들의 문제점은 기존코드를 변형해서 동작이 된다. 

기존코드를 변형해서 하는데 왜 문제냐라고 물어본다면 아직 나의 수준에서는 정확히 설명하기가 어려워서 간단하게 예측불가능한 동작이 생길수도 있고, 프로그래밍 디버깅이 어려워진다.

그렇기때문에 꼭 새 객체를  생성해야한다.