🔎Reducer

💡개념 및 사용이유

• 컴포넌트 외부에 상태 업데이트 로직을 모아놓은 단일 함수
• 컴포넌트 외부에 Reducer 함수 생성해 state 변경하는 로직 이동
• state를 업데이트 할 때 useState를 사용한 변경함수(setState)로 해주면,
  컴포넌트가 커질수록 로직이 점점 많아져서 코드가 지저분해짐
• 컴포넌트에서 로직을 분리해 코드의 복잡성을 줄이고 모든 로직에 쉽게 접근

💡사용하기

useReducer

• 컴포넌트에 Reducer를 추가할 수 있게 해주는 React Hook

1. useState 대신해서 useReducer 선언하기

// useState 사용
const [state, setstate] = useState(initialArg);
// useReducer 로 변경
const [state, dispatch] = useReducer(reducer, initialArg)


const initialArg = { age: 42 }

2. dispatch 통해 상태 전달하기

• dispatch({전달할객체}) 형태를 통해 전달되는 객체를 action이라고 부름
• action 객체는 어떤 형태가 되든 상관없지만,
  일반적으로 어떤 조건일때 실행할 지 설명하는 문자열을 type으로 지정,
  다른 프로퍼티에는 추가 정보를 전달

dispatch({ type: 'added', ex:'ex1', num: 123 })
dispatch({ type: 'deleted', ex:'ex2' })

3. Reducer 함수 작성

• Reducer 함수
  - 상태 변경 로직 들어감
  - 2개의 인자 : 현재상태(state), 액션 객체(action)
  - 리턴값 : 변경된 state
• 액션 객체 안의 type에 따라서 리턴해주는 값을 결정 - 일반적으로 switch문 사용
• 현재상태 state를 인자로 받아오기 때문에 컴포넌트 외부에서도 Reducer 사용할 수 있음

function exReducer(state, action) {
  switch (action.type) {
    case 'added': {
      // type이 'added'일 때 실행할 로직

      // 구조분해할당
      const { ex, num } = action;
      return {
        // ...
        // 리턴할 변경된 state 작성
        // ex = 'ex1', num = 123
      };
    }
    case 'deleted': {
      // type이 'deleted'일 때 실행할 로직
      return {
        // ...
        // 리턴할 변경된 state 작성
        // action.ex = 'ex2'
      };
    }
    default: {
      throw Error(`알수없는 액션 타입: ${action.type}`);
    }
  }
}

💡useState vs useReducer

• useState가 Reducer 함수 , dispatch , action 을 작성하지 않아도 돼서 처음에는 코드양이 적을 수 있지만, 많은 이벤트 핸들러가 생기고 상태를 비슷한 방식으로 수정하는 경우, useReducer의 코드양이 더 적어짐
• 가독성 역시 코드양이 늘어날 수록 useReducer을 사용한 경우가 좋음
  => 어떤 이벤트가 발생했을 때 어떤 로직을 수행하라 한눈에 파악 가능