여러 이벤트 핸들러에 뿌려진 상태 업데이트가 많은 컴포넌트는 압도적이에요. 이러한 경우에는 모든 업데이트 로직을 컴포넌트 외부에 하나의 함수로 통합할 수 있는데 이를 리듀서라고 불러요. 이 페이지에서는 - 리듀서 함수가 무엇인지 - useState를 useReducer로 어떻게 리팩토링 하는지 - 리듀서를 언제 사용하는지 - 어떻게 써야 올바르게 쓰는지 를 알아볼 거예요. Consolidate state logic with a reducer | 리듀서로 상태 로직 합치기 컴포넌트가 복잡해질수록 컴포넌트의 상태가 업데이트되는 방법을 힐끗 봐서는 알 수가 없어요. 예를 들어 아래의 TaskApp 컴포넌트는 tasks의 배열을 상태로 가지고 있고 할 일의 추가, 삭제, 수정을 위한 3개의 서로 다른 이벤트 핸..
useReducer
useReducer는 컴포넌트에 리듀서(reducer)를 추가해주는 리액트 훅이에요. const [state, dispatch] = useReducer(reducer, initialArg, init?) Reference | 레퍼런스 useReducer(reducer, initialArg, init?) 리듀서로 상태를 관리하기 위해서는 최상위 컴포넌트에서 useReducer를 호출하세요. import { useReducer } from 'react'; function reducer(state, action) { // ... } function MyComponent() { const [state, dispatch] = useReducer(reducer, { age: 42 }); // ... Parameter..
