복잡한 변경 규칙을 action과 reducer로 모읍니다.
useReducer는 현재 상태와 action으로 다음 상태를 계산합니다. 가능한 사건을 명시하면 여러 핸들러에 흩어진 규칙을 한곳에서 검토할 수 있습니다.
reducer는 외부 값을 바꾸지 않는 순수 함수로 작성합니다.
action에는 사건 type과 전이에 필요한 최소 데이터만 넣습니다.
reducer 안에서 API를 호출하면 재실행과 단위 테스트가 어려워집니다.
로컬 프로젝트에서 확인해보세요remove action과 삭제 버튼을 추가하세요.
import { useReducer } from "react";
function reducer(state, action) {
switch (action.type) {
case "add":
return [...state, { id: crypto.randomUUID(), title: action.title }];
default:
return state;
}
}
export default function App() {
const [items, dispatch] = useReducer(reducer, []);
return (
<main>
<button onClick={() => dispatch({ type: "add", title: "React 복습" })}>추가</button>
<ul>
{items.map((x) => (
<li key={x.id}>{x.title}</li>
))}
</ul>
</main>
);
}