useReducer로 useState 리팩터링 하기 (1)

원래 useState로 관리하던 사용자 기호들 중 작동 방식이 비슷한 도구들을 묶어 reducer로 관리하기로 했다.

 

const [enterSymbol, setEnterSymbol] = useState([]);
const [pauseSymbol, setPauseSymbol] = useState([]);
const [mouseSymbol, setMouseSymbol] = useState([]);
const [slashSymbol, setSlashSymbol] = useState([]);
...
  case 4:
    enterSymbol[selectedWordIdx] = true;
    setEnterSymbol([...enterSymbol]);
    break;
  case 5:
    pauseSymbol[selectedWordIdx] = true;
    setPauseSymbol([...pauseSymbol]);
    break;
  case 6:
    mouseSymbol[selectedWordIdx] = true;
    setMouseSymbol([...mouseSymbol]);
    break;
  case 7:
    slashSymbol[selectedWordIdx] = true;
    setSlashSymbol([...slashSymbol]);
    break;
...

위와 같이 useState로 상태를 선언하고 state에 무엇을 할 지 직접 알려주는 방식으로 관리했으며 렌더링시에도 상태만 다른 같은 구문으로 조건부 렌더링을 했다.

같은 코드가 반복되어 코드의 양이 늘어났을 뿐만 아니라 이후에 다른 기호가 추가될 경우 똑같은 코드를 또 추가해야 한다는 문제가 있어, 작동 방식이 간단한 이런 기호들을 simpleSymbols로 묶어 reducer로 관리하도록 수정했다.

 

기존에 각 기호들을 길이가 전체 단어 수와 같은 boolean 배열로 관리 했었는데, 저장 공간을 절약하고 확장성을 높이기 위해 여러 기호들을 인덱스가 단어의 인덱스와 같은 하나의 배열로 관리하되 각 요소에는 해당 인덱스에 표시된 기호의 이름이 들어가도록 수정했다.

즉

enterSymbol = [false, true, false, ..., false]
pauseSymbol = [true, false, false, ..., false]
...

이렇게 관리되던 기호들을

simpleSymbols = [
	{"PAUSE"}, 
    	{"ENTER"}, 
        {}, 
        {"MOUSE", "SLASH"}, 
        ... ,
        {}
]

이렇게 묶어서 관리하도록 수정했다.

 

  const [simpleSymbols, dispatch] = useReducer(
    simpleSymbolsReducer, // reducer
    [] // initial state
  );

const simpleSymbolsReducer = (state, action) => {
  switch (action.type) {
    case "INIT":
      return action.payload;
    case "ADD":
      return state.map((symbol, i) => {
        if (i === action.idx) {
          return new Set([...symbol, action.symbol]);
        } else {
          return symbol;
        }
      });
    case "REMOVE":
      return state.map((symbol, i) => {
        if (i === action.idx) {
          return new Set();
        } else {
          return symbol;
        }
      });
    default:
      throw new Error("Unhandled action");
  }
};

simple symbol을 관리하는 리듀서에는 초기화, 기호 추가, 제거라는 액션이 있다. (초기화는 서버에서 받아온 기존 데이터를 넣어주는 동작이다.)

 

아무 문제가 없어 보이는 코드지만 처음에는 전혀 작동을 하지 않았다. 여러 문제가 있었는데 이어서 쓰겠다.