[ React ] React Hooks 정리 6 - useReducer

useReducer 

state를 업데이트 할때 사용
dispatch(state를 업데이트 하기 위한 요청) action(요청내용)을 담아서 reducer에게 전달하면 state를 업데이트 시킨다.

useReducer로 생성한 state는 useReducer에 인자로 전달된 reducer에 의해서만 값이 변경된다.

 

reducer로 sate를 변경하는 과정

1. dispatch가 만들어준 useReducer함수에 action이라는 인자를 넣어서 reducer에게 전달해주면
2. reducer가 호출되어 reducer의 두번째 인자인 action으로 전달되고 그 action에서 값 변경후 return 한 값이
3. useReducer로 생성한 state의 값을 변경한다.

action은 object로 전달하는데,
{ type: '' , payload: 변경할 값 }
type을 분기점으로 다른 일을 할수 있게 할 수 있어서
보통 reducer 함수 내에서는 switch나 if-else문을 사용한다고 한다.

 

사용 형태

코드 순서대로가 아닌 전체적인 흐름을 이해해야 한다.

 

1. reducer 함수 작성

// 실수 방지를 위해 타입을 상수화 시켜서 사용 ( 선택 )
const TYPES = {
  CASE_1 : 'case1',
  CASE_2 : 'case2'
}

const reducer = (state, action) => {
  // reducer는 두가지 인자를 받는다.
  // state : 현재 (reducer실행 전의) state값
  // useReducer의 dispatch의 파라미터인 action으로 전달된 값
  // switch 사용 예제
  switch (action.type) {
    case TYPES.CASE_1:
      // case1에서 변경할 과정들을 실행하고 변경할 state를 return한다.
      return  ;
    case TYPES.CASE_2:
      // case1에서 변경할 과정들을 실행하고 변경할 state를 return한다.
      return  ;
    default:
      rdturn state;
    // switch문 내에서 return한 값들이 state값으로 변경 된다!
  } 
}

 

2. useReducer 사용

const [state, dispatch] = useReducer(reducer, state초기값)
const handleDispatch = () => {
  dispatch({
    type: CASE_1(실행할 작업을 설명할수 있도록 작성 또는 그 값을 상수화 한 객체 등을 사용),
    payload: '변경할 값'
  })
}

<div onClick={handleDispatch}> 리듀서 호출 </div>

 

 

 

---

✔️ 참고

내용을 글로 정리해봤지만 예제나 더 자세한 설명은 영상을 보면서 흐름 파악하는게 도움이 더 될듯하다.

https://www.youtube.com/watch?v=tdORpiegLg0&list=PLZ5oZ2KmQEYjwhSxjB_74PoU6pmFzgVMO&index=9