React - useReducer

useReducer

이전에는 컴포넌트 상태를 업데이트 해야 할 때는 useState를 이용하여 새로운 상태를 설정해줬다.

useReducer라는 훅을 이용해서 새로운 상태를 설정해줄 수 있다.

💡useState, useReducer의 차이

• usestate는 설정하고 싶은 다음 상태를 직접 지정해주는 방식으로 상태를 업데이트 한다.

• useReducer는 action이라는 객체를 기반으로 상태를 업데이트 한다. 여기서 action객체라는 것은 업데이트 할 때 참조하는 객체이다.

• 여기서 type을 값을 사용해서 어떤 업데이트를 진행할 것인지 명시할 수 있다.
  업데이트 할 때 필요한 참조하고 싶은 다른 값이 있다면

dispatch({
type: 'Incremet',
diff: 4
})

와 같이 업데이트 해줄 수 있다.

• useReducer라는 훅 함수를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다.
  심지어 다른 파일에 작성 후 불러와서 사용할 수도 있다.

💡형태

function reducer (state, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state +1;
    case 'DECREMENT':
      return state -1;
    default:
      return state;
  }
}

💡useReducer의 사용법

const [number, dispatch] = useReducer(reducer/*(reducer함수를 입력)*/, 0/*기본값을 넣어준다 숫자, 문자열, 객체, 배열이 될 수 있다.*/);

//dispatch 에 대해서
dispatch({ type: 'INCREMENT'});
//dispatch는 action을 발생시키는 함수이다.