react에서 redux 시작하기(2)

💡 기초 세팅부터 확인하고 싶으신 분들은
react에서 redux 시작하기 1편을 참고해주세요!

이어서 이번에는 본격적으로 reducer와 dispatch를 사용해보겠습니다.

1. reducer/dispatch란?

const [state, dispatch] = useReducer(reducer, initialArg, init);

useState의 대체 함수입니다. (state, action) => newState의 형태로 reducer를 받고 dispatch 메서드와 짝의 형태로 현재 state를 반환합니다.

왜?

다수의 하윗값을 포함하는 복잡한 정적 로직을 만드는 경우나 다음 state가 이전 state에 의존적인 경우에 보통 useState보다 useReducer를 선호합니다. 또한 useReducer는 자세한 업데이트를 트리거 하는 컴포넌트의 성능을 최적화할 수 있게 하는데, 이것은 콜백 대신 dispatch를 전달 할 수 있기 때문입니다.

이렇게 작은 프로젝트에서는 빛을 발하지 못하지만 엄청 큰 대규모의 사이트들에서는 데이터를 한 곳에서 관리하고 처리할 수 있기 때문에 사용합니다.

redux를 만들어서 state수정밥법을 세팅해 놓으면 그 reducer만 확인하면 되니까요!

1. reducer 생성하기

자 이제 버튼을 두개 생성해서 +버튼을 누르면 값이 증가 -버튼을 누르면 감소하게끔 데이터를 수정해보겠습니다.

let store = createStore(() => {
  return 7;
});

index.js에 있는 이 코드를 아래처럼 바꿔야 합니다.

function reducer(state = 0, action) {
  return state;
}

let store = createStore(reducer);

쉽게 말해서 reducer라는 함수를 createStore()에 넣으시면 됩니다. reducer는 function안에 state 초기값과 state 데이터를 수정하는 방법이 내장되어 있다고 생각하시면 편합니다.
reducer 함수 첫번째는 state 값이 들어가고 꺼내서 쓸 수도 있습니다. 옆의 action은 뒤에 이어서 설명하겠습니다. 그리고 기존의 숫자 7은 이제 카운트할 때 보기 편하게 0으로 초기화 시켜주겠습니다.

찾아보니 여기서 state = 0과 같은 관습은 권장하지 않는다고 합니다. 이유는 초기값은 때때로 props에 의존해야하기 때문에 Hook 호출에서 지정된다고 합니다! 자세한건 Specifying the initial state(공식문서)를 참고해주세요!

📚 저희는 우선 배우고 익숙해지는게 먼저이므로 짚고만 넘어갈게요!

2. reducer 내부 설정

이제 내부 설정입니다!

우선 내부에서 데이터를 수정하는 로직의 이름을 붙여줍니다 ex)( action.type === 로직 )
그 다음에 if문으로 그 로직이 들어오면 어떤 state를 보내줄지 정의하면 됩니다. 만약에 그렇지 않다면 그런 것까지 작성하면 되겠죠? 저는 간단한 증가를 위해서 아래와 같이 작성했습니다.

function reducer(state = 0, action) {
  if (action.type === "증가") { // 증가라는 로직이 들어오면
    state++; // state값을 1 증가
  }
  return state; // 변경된 state를 반환
}

자 이러면 index.js 설정은 끝이 났습니다!

3. dispatch 사용하기

기존에 있는 페이지에 버튼을 두 개 추가해보겠습니다!

	<p>{props.counter}</p>
        <div>
          <button>증가</button>
          <button>감소</button>
        </div>

여기서 dispatch함수를 사용합니다. 이 함수를 쓰면 버튼을 누를 시에 적어놓은 로직 방법을 실행하라고 명령을 할 수 있습니다.
dispatch안의 내용은 type : "로직이름"이와 같이 작성하시면 됩니다!

<button onClick={() => {
              props.dispatch({ type: "증가" });
            }}
          >
            증가
          </button>

이렇게 데이터를 수정하는 방법을 미리 정의 해둠으로써 버그나 각종 문제가 생겼을 때 확인하고 수정하기 쉽기 때문에 사용한다고 합니다!

그럼 잘 작동하나 확인해보겠습니다.
저는 심심해서 감소까지 같이 만들어 보았습니다!

작성할 땐 귀찮아도 이렇게 하나씩 올리면서 학습에는 확실히 도움이 되는 듯 합니다. 더 열심히 이것저것 배워서 좀 더 좋은 글을 쓸 수 있는 사람이 되어보겠습니다. 감사합니다.