react - useReducer

useReducer 사용하는 이유

리액트 컴포넌트 내부에서 useState를 사용해 관리할 수 있지만,
컴포넌트 내에서 복잡한 로직들을 처리하면 가독성도 좋지않고, 다른 컴포넌트에서 재사용하고 싶을 때
재사용성이 떨어지므로 useReducer를 사용한다면 컴포넌트에서의 코드가 간결해질 수 있고,
다른 컴포넌트에서 사용하여 재사용성을 높일 수 있습니다.

사용 방법

우선 useReducer의 선언을 보겠습니다.

const [state, dispatch] = useReducer(reducer, initialState, init);

state = 컴포넌트에서 사용할 상태

dispath = 컴포넌트 내에서 상태를 변경할 수 있는 함수 (reducer 호출)

reducer = 현재state, action 객체를 인자로 받아, 기존의 state를 대체하여 새로운 state를 반환하는 함수

initialState = 상태의 초기값

dispatch

dispatch({type: })

distpacth 함수는 컴포넌트 내에서 상태를 변경하고 싶을 때 호출하는 함수입니다.
매개변수로는 action 의 객체 타입으로 전달해줘야합니다.
이 객체의 값으로는 컴포넌트 내부의 데이터나, 변경하고 싶은 타입을 변수명을 지정하고
reducer를 통해 외부 함수에서 로직을 처리할 수 있습니다.

reducer

export default function personReducer(person,action){
    switch (action.type){
        case 'updated':
            const { prev,current } = action
            return {
                
                    ...person,
                    mentors:[
                      ...person.mentors
                  ].map(mentor=>{
                    if (mentor.name === prev){
                      mentor.name = current
                    }
                    return mentor
                  })
                  
            }

컴포넌트 외부에 파일을 만들어서 복잡한 로직들을 처리할 수 있습니다.
매개변수로는 state와 객체 타입의 action을 받을 수 있습니다.
state와 action의 데이터를 이용해서 새로운 state를 반환할 수 있습니다.