12일차 useReducer - 생활코딩! React 리액트 프로그래밍

지난 학습에서 state를 공부했었다.

3일차 리액트 기초(06~07장) - 생활코딩! React 리액트 프로그래밍

 

이번 편에서 공부할 내용은 reducer라는 도구이다. state와 기본적으로 같은 일을 하지만, state는 상태값을 update하는 함수만 제공하는 반면, reducer는 상태값을 제어하는 비즈니스 로직을 연동할 수 있는 점이 다르다. 즉, useState 기능으로는 비즈니스 로직이 외부에 존재하는 모양을 띄게 되고, 로직을 값(상태)과 한데 묶어 놓은 것처럼 보인다. 이 게 별것 아닌 것 같지만 소프트웨어 공학적으로 응집성(서로 연관된 기능 및 데이터가 물리적/심리적으로 가까이 있는 정도)을 많이 높여줄 수 있게 되는 것이다.

실습해 보았을 때는 state와 큰 차이를 내기 어려웠다. 왜냐하면 간단한 상태를 관리하는데는 소 잡는 칼이 될 수 있기 때문이다. 규모가 큰 객체나 복잡한 로직이 필요한 값에 쓰는 것이 맞을 것이다.

 

실습은 조금이라도 복잡한 상황을 경험하려고 객체를 이용해 보았다.

import { useReducer } from 'react';
 
const NameCard = {
  names : ['시나모롤', '피카츄', '폼폼푸린', '파이리', '마이멜로디', '뮤'],
  cur : 0,
};
 
function NameCardReducer(card, act) {
  if(act == 'left') {
    const newCard = { ...card };
    newCard.cur = newCard.cur > 0 ? newCard.cur - 1 : newCard.names.length - 1;
    return newCard;
  }
  else if(act == 'right') {
    const newCard = { ...card };
    newCard.cur = newCard.cur < newCard.names.length - 1 ? newCard.cur + 1 : 0;
    return newCard;    
  }
 
  throw 0;
}
 
function ReducerPractice() {
  const [nameCard, nameCardHandler] = useReducer(NameCardReducer, NameCard);
 
  return (
    <div>
      <h2>{nameCard.names[nameCard.cur]}</h2>
      <button onClick={() => nameCardHandler('left')}>left</button>
      <button onClick={() => nameCardHandler('right')}>right</button>
    </div>
  );
}
 
function App() {
  return (
    <div className="root">
      <h1>useReducer</h1>
      <ReducerPractice></ReducerPractice>
    </div>
  );
}
 
export default App;

NameCard에 있는 이름들이 좌우 버튼으로 로테이션하면서 보이는 예제이다.

 

사족: reducer의 이름 유래는 배열의 reduce 함수라고 한다. reduce 함수가 배열값을 하나로 만들어주는 함수인 것처럼 reducer도 분산된 로직과 데이터를 통합한다.