RSS DEV 커뮤니티

폴리필 - 사용: 리듀서

이 폴리필은 함수형 컴포넌트에서 복잡한 상태를 관리하기 위해 React의 `useReducer` 훅을 시뮬레이션합니다. `stateStore` 배열을 사용하여 시뮬레이션된 렌더링 동안 상태 값을 저장합니다. `currentIndex` 변수는 각 `useReducer` 호출이 렌더링 주기 동안 `stateStore`의 일관된 슬롯에 매핑되도록 합니다. `useReducer` 함수 자체는 상태가 정의되지 않은 경우 초기화하고 현재 상태와 `dispatch` 함수를 반환합니다. `dispatch` 함수는 액션을 받아 현재 상태와 액션으로 제공된 `reducer` 함수를 호출하고 새 상태로 `stateStore`를 업데이트합니다. `resetIndex` 함수는 후속 렌더링 시뮬레이션을 위해 훅 메커니즘을 준비하는 데 중요하며 React의 동작을 모방합니다. 간단한 `MyComponent` 함수는 `counterReducer`와 함께 `useReducer`를 사용하여 상태 객체를 관리하는 방법을 보여줍니다. `MyComponent`를 여러 번 실행하면 초기 렌더링과 상태 업데이트 후의 리렌더링이 시뮬레이션됩니다. 출력은 INCREMENT 및 SET_NAME과 같은 액션을 디스패치한 후 초기 값에서 업데이트된 값으로 상태가 전환되는 것을 명확하게 보여줍니다. 이 단순화된 폴리필은 React의 렌더링 파이프라인의 복잡성 없이 리듀서를 통한 상태 지속성 및 업데이트 로직에 대한 개념적 이해를 가능하게 합니다. 면접 시에는 정의, 폴리필의 작동 방식, 그리고 `useState`보다 `useReducer`를 선호하는 경우에 대해 논의할 수 있습니다.
favicon
dev.to
Polyfil - useReducer