State 로직을 reducer로 작성

<aside> 💡

</aside>

<aside> ✅

한 컴포넌트에서 state 업데이트가 여러 이벤트 핸들러로 분산 되는 경우, state를 업데이트 하는 모든 로직을 reducer를 사용해 컴포넌트 외부의 단일 함수로 통합해 관리

</aside>

`useReducer(reducer, initialArg, init?)`

reducer: state가 어떻게 업데이트 되는지 지정하는 Reducer 함수
- Reducer 함수는 반드시 순수 함수여야 하며, State와 Action을 인수로 받아야 하고, 다음 State를 반환해야 한다.
- State와 Action에는 모든 데이터 타입이 할당될 수 있다.
initialArg: 초기 State가 계산되는 값
- 모든 데이터 타입이 할당될 수 있다.
- 초기 State가 어떻게 계산되는지는 다음 init 인수에 따라 달라진다.
선택사항 init: 초기 State를 반환하는 초기화 함수
- 이 함수가 인수에 할당되지 않으면 초기 State는 initialArg로 설정된다.
- 할당되었다면 초기 State는 init(initialArg)를 호출한 결과가 할당된다.

현재 state : 첫번째 렌더링에서의 state는 init(initialArg) 또는 initialArg로 설정 (init이 없을 경우 initialArg로 설정됩니다).
**dispatch 함수 :** dispatch는 state를 새로운 값으로 업데이트하고 리렌더링을 일으킴.

dispatch 함수는 오직 다음 렌더링에 사용할 state 변수만 업데이트
- 만약 dispatch 함수를 호출한 직후에 state 변수를 읽는다면 호출 이전의 최신화되지 않은 값을 참조
Object.is 비교를 통해 새롭게 제공된 값과 현재 state를 비교한 값이 같을 경우, React는 컴포넌트와 해당 컴포넌트의 자식 요소들의 리렌더링을 건너뜀.
- 최적화에 관련된 동작으로써 결과를 무시하기 전에 컴포넌트가 호출되지만, 호출된 결과가 코드에 영향을 미치지는 않음.
React는 state의 업데이트를 batch
- 이벤트 핸들러의 모든 코드가 수행되고 set 함수가 모두 호출된 후에 화면을 업데이트한다. 이는 하나의 이벤트에 리렌더링이 여러번 일어나는 것을 방지한다.
- DOM 접근 등 이른 화면 업데이트를 강제해야할 특수한 상황이 있을 경우 flushSync를 사용할 수 있다.