[TIL] React Hook useReducer를 맛보다(?)

useReducer와의 첫 만남

2차 프로젝트를 진행하면서 useState를 많이 사용했었는데, 전체 상태 관리를 하기 위해서는 반드시 Redux를 사용해야하는 것으로 알고 있었다. Udemy에서 React native 공부를 하던 중 React Hook 중에 useReducer라는 것이 있다는 것을 처음 알게 되었다...😮

아직 Redux에 대해서 action, dispatch, reducer 등 단어만 대략적으로 알고만 있지 명확하게 알고 있지 못한 상태에서 useReducer를 맞딱드리게 되니 혼란스러웠다... 전역 상태 관리를 할 수 있는 Hook 기능이 있었을 줄이야..

useReducer 란 ..?

알아본 바로 useReducer는 함수형 컴포넌트에서 어느정도 Redux를 대신하는 역할을 한다. React에서 여러 컴포넌트들의 state를 통합적으로 관리하기 위해 고안된 기술(?) 이라고 하는데 전역 관리를 어떤식으로 할 수 있는지는 아직 더 연구해봐야겠음!

useState와 달리 상태를 업데이트 하는 로직을 컴포넌트 밖에서 작성하거나 다른 파일로 아예 독립해서 작성할 수 있다!

import React, { useReducer } from 'react';

// 컴포넌트 밖에서 reducer 함수를 정의!
// reducer 함수가 return 하는 것이 새로운 상태(state)가 된다.
// 보통 reducer 함수 내에서는 switch 문이 돌아가는 것 같다 ..
const reducer = (state, action) => {
  switch(action.type){
    case 'CHANGE' :
      return action.value;
    default:
      return state;
  }
}

const LearningUseReducer = () => {
  // useReducer 정의하는 부분
  // useReducer의 인자1은 밖에서 정의한 reducer 함수를 받는다.
  // useReducer의 인자2는 초기 state 값을 넣어준다.
  // state는 현재 상태를 의미
  // dispatch는 바뀔 상태 (action)을 담고 reducer에 전달해준다.(?)
  const [state, dispatch] = useReducer(reducer, 'initialState');
  
  return (
    <div>
      <h1>{state}</h1>
      <input 
        type='text'
        value={state}
        onChange={(e)=>{dispatch({type: 'CHANGE' , value: e.target.value})}}
      />
    </div>
  )
}

export default LearningUseReducer;

useReducer의 흐름을 내가 이해한대로 요약해보자면 ..

1. reducer 함수를 컴포넌트 밖에서 정의한다.
2. reducer 함수는 dispatch가 전달해준 action을 받아서 어떠한 상태 state를 반환한다.
3. reducer는 컴포넌트의 state를 바꾸는 함수!
4. 컴포넌트 상단에서 useReducer를 선언하다.
5. const [state, dispatch] = useReducer(reducer, initialState) 형태
6. initialState자리에는 초기 state 값을 넣어주면 된다.
7. onChange, onClick 등 이벤트에 dispatch({key:keyValue})식으로 action을 실행시키면 reducer가 새로운 state 를 리턴하면서 컴포넌트가 다시 렌더된다.

참고 블로그
https://react.vlpt.us/basic/20-useReducer.html
https://gist.github.com/ninanung/cb199ad80ac29da4ca6111b970956d79