기존의 useState는 컴포넌트 내부에서 상태를 업데이트 해주는 Hook이기 때문에 사용이 쉽지만 재사용이 어렵다
때문에 다른 컴포넌트에서도 사용할 수 있도록 재사용성을 높인 Hook이 useReducer이다.
우선 useReducer를 사용하기 위해서는
사용하려는 컴포넌트에서 상태값과, dispatch, useReducer함수, 초기값을 정의해준다.
const [person, dispatch] = useReducer(personReducer, initialPerson);
특정 reducer를 호출(사용)하고 싶은 경우 dispatch를 사용하여 특정 데이터를 전달해주고, 관련 함수를 호출할 수 있다.
dispatch({type:'updated',prev,current})
reducer함수에서는 상태값과 action을 받아오고, switch를 통해 액션의 타입을 받아온다. 이후 case를 통해 각 type을 구별한다.
타입을 받아온 후에는 관련 데이터를 정의해주고, 실행 할 함수를 정의한다.
export default function personReducer(person, action) {
switch (action.type) {
case "updated": {
const { prev, current } = action;
// const prev = action.prev;
// const current = action.current;
return {
...person,
mentors: person.mentors.map((mentor) => {
return mentor.name === prev ? { ...mentor, name: current } : mentor;
}),
};
}
}
}