[리액트] useReducer - 다양한 상태를 업데이트 하기

useReducer는 useState보다 다양한 상태를 다른 값으로 업데이트할 때 사용하는 Hook이다.

useReducer의 가장 큰 장점은 컴포넌트 업데이트 로직을 컴포넌트 바깥으로 뺄 수 있다는 것이다!!

 

 

- useReducer를 알아보기 전에 reducer(리듀서)에 대해 알아보자.

 

리듀서는 현재 상태와 업데이트를 위해 필요한 정보를 담은 액션 값을 전달받아서 새로운 상태를 반환하는 함수이다.

 

[예시]

function reducer(상태, 액션) {
  switch (액션.type) {
    case "증가":
      return { value: 상태.value + 1 };
    case "감소":
      return { value: 상태.value - 1 };
    default:
      return 상태;
  }
}

reducer라는 함수를 선언했고, 매개변수로 상태와 액션이 있다.

(보통은 상태는 state, 액션은 action으로 영어로 작성한다. 예시에서는 보기 쉽게 한글로 작성했다.)

 

만약 액션의 유형(type)이 증가일 경우 상태의 value를 1 증가시키고 반환,

감소일 경우는 value를 1 감소시키고 반환한다.

아무것도 해당되지 않으면 기존 상태를 반환한다.

 

⭐중요! 리듀서 함수에서 새로운 상태를 만들 때는 무조건 불변성을 지켜야 한다.⭐

그래서 return {...}로 불변성을 지키면서 업데이트한 새로운 상태를 반환하는 것을 알 수 있다.

 

 

- 대망의 이번 게시글의 주인공인 useReducer를 살펴보자.

const CounterReducer = () => {
  const [state, dispatch] = useReducer(reducer, { value: 0 });
  return (
    <div>
      <p>
        현재 카운터 값 : <b>{state.value}</b>
      </p>
      <button onClick={() => dispatch({ type: "증가" })}>+1</button>
      <button onClick={() => dispatch({ type: "감소" })}>-1</button>
    </div>
  );
};

export default CounterReducer;

 

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

위 코드를 두 가지로 나눠서 설명해보자면,

 

useReducer(reducer, initialState) : useReducer의 매개변수로 리듀서 함수와 해당 리듀서의 기본값을 넣어 준다.

 

const [state, dispatch] : 현재 가리키고 있는 상태인 state 값과 액션을 발생시키는 dispatch 함수를 받아 온다.

dispatch는 dispatch(액션) 형태로, 매개변수로 액션 값을 넣어 주면 우리가 정의해둔 리듀서 함수가 호출된다!

 

 return (
    <div>
      <p>
        현재 카운터 값 : <b>{state.value}</b>
      </p>
      <button onClick={() => dispatch({ type: "증가" })}>+1</button>
      <button onClick={() => dispatch({ type: "감소" })}>-1</button>
    </div>
  );
};

현재 카운터 값은 {state.value}로 불러올 수 있고

+1 / -1 버튼을 클릭할 때마다 우리가 정의해둔 type에 맞게 액션이 dispatch로 잘 들어오는 걸 알 수 있다.

 

 

 

 

 

 

+ 쓸모없는 TMT)

reducer 단어의 뜻이 무엇인지 궁금해져서 찾아보았다.

선형대수학에서 reduction이란 일련의 방정식이나 행렬에 간단한 규칙을 적용하여 더 간단한 형태로 바꾸는 것을 뜻한다.

우리가 사용하는 reducer도 간단한 규칙을 적용하여 더 간단한 형태로 바꾸는 것으로 볼 수 있다!!

주어진 현재 상태(state)를 새로운 상태(state)로 고쳐나간다.

그래서 작명할 때 reducer라고 한 것일지도....라는 나의 생각이다.