[React] useReducer

✅ useReducer

  const reducer = (state, action) => {
    return {
      ...state,
      [action.name]: action.value,
    };
  };

  const [state, dispatch] = useReducer(reducer, {
    userName: "",
    phoneNumber: "",
    email: "",
    address: "",
    region: "",
  });

  const { userName, phoneNumber, email, address } = state;

⏩ useReducer

리듀서는 현재 상태와, 업데이트를 위해 필요한 정보를 담은 액션(action) 값을 전달 받아 새로운 상태를 반환하는 함수이다. 내가 맡은 페이지에 input 창이 너무 많아 각 인풋창 별로 useState 함수를 쓰는 것은 너무 비효율적이라고 생각했고, 또 Redux를 본격적으로 배우기 전에 예습차원(?)으로 공부해보고자 활용해보았다.

⏩ useReducer 활용방법

const [state, dispatch] = useReducer(reducer, {
  userName: ""
	...
})

useReducer 의 첫번째 파라미터는 리듀서 함수, 그리고 두번째 파라미터는 해당 리듀서의 기본 값을 넣어준다. 그리고 state 값과 dispatch 함수를 받아오게 되는데, 여기서 state 는 현재 가르키고 있는 상태고, dispatch 는 액션을 발생시키는 함수이다. dispatch(action) 와 같은 형태로, 함수 안에 파라미터로 액션 값을 넣어주면 리듀서 함수가 호출되는 구조.

const reducer = (state, action) => {
 return {
   ...state,
   [action.name]: action.value,
 };
};

리듀서는 현재 상태와, 업데이트를 위해 필요한 정보를 담은 액션(action) 값을 전달 받아 새로운 상태를 반환하는 함수이다. 리듀서 함수에서 새로운 상태를 만들 때는 꼭 불변성을 지켜주어야 한다.
useReducer 를 사용하면 기존에 클래스형 컴포넌트에서 input 태그에 name 값을 할당하고 e.target.name 을 참조하여 setState 를 해준 것과 유사한 방식으로 작업을 처리 할 수 있다.

** 참고: https://velog.io/@velopert/react-hooks