useReducer

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

simpleSymbols = [ {"PAUSE"}, {"ENTER"}, {}, {"MOUSE", "SLASH"}, ... , {} ] 각 단어마다 어떤 기호가 포함되어 있는지 저장하기 위해 위와 같은 방법을 사용한 이유는 다음과 같다. 기호들을 reducer로 묶으면서, 같은 로직을 기호의 이름만 달리 해서 실행할 수 있어야 했다. 사용자가 같은 기호를 여러 번 적용하더라도 중복 없이 하나만 저장해야 한다. 각 기호별로 단어 수만큼의 길이를 가진 배열을 저장하는 것보다 저장공간이 절약된다. 새로운 기호를 추가하더라도 기존 코드를 변경 할 필요 없이 해당 기호의 이름만 추가하면 된다. 기호들을 렌더링 할 때 각 단어마다 전체 기호 수 만큼의 비교 연산을 수행할 필요가 없다(set에 있는 단어들을 그냥 모두..

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[selectedWordId..

useReducer

useReducer는 reducer를 사용할 수 있도록 하는 리액트 내장 훅이다. 현재 스피치의 스크립트를 편집하고 재생하는 컴포넌트에 너무 많은 상태들이 useState로 관리되고 있어서, 업데이트 로직이 비슷한 상태들을 reducer로 묶어보려고 한다. 그래서 우선 useState로 관리하던 상태들을 useReducer로 리팩터링하는 과정에 집중해서 알아볼 것이다. 상태를 업데이트 하는 로직을 하나의 함수로 컴포넌트와 분리할 수 있는데, 이것을 reducer라고 한다. reducer를 다른 파일로 분리해 사용할 수도 있으며 코드가 복잡해 질 수록 유용하다. useReducer는 reducer function과 initial state 두 개의 인자를 갖고, stateful value와 dispatch..