멘토 바꾸기/추가하기/삭제하기(useReducer)

박찬영·2023년 3월 2일
0

기존의 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;
				}),
			};
		}
	}
}

0개의 댓글