[react] useReducer Hook 이해하기

[https://blog.logrocket.com/react-usereducer-hook-ultimate-guide/#how-usereducer-hook-work]를 공부한 블로그

개인적인 번역글

useRducer Hook은 어떻게 작동하는가? 

useReducer Hook은 useState Hook처럼 state를 저장하고 업데이트하기 위해 쓰인다. 

reducer function을 첫번째 파라미터로, 두번째 파라미터로 초기 state를 받는다. 

 

useReducer는 현재의 state 값과 dispatch함수를 가지고 있는 array를 return한다.

(우리는 dispatch함수에 action을 보낼 수 있고 그걸 나중에 불러낼 수 있다)

 

reducer함수는 스스로 두개의 파라미터를 받아들이고 한개의 value를  return한다. 

첫번째 파라미터는 현재 state이고 두번째 파라미터는 action이다. 

state는 우리가 조작하는 데이터다.

reducer 함수는 action을 받는데 그건 dispatch 함수에의해 실행된 것이다. 

 

function reducer(state, action) { }

dispatch({ type: 'increment' })

 

action은 reducer 함수에 보낸 지침같은 것이다. 

명시된 action을 기반으로, reducer함수는 필요한 상태를 업데이트 한다. 

만약 이전에 redux와 같은 상태관리 라이브러리를 써본적이 있다면 이러한 상태관리 패턴을 접했을 것이다.

 

 

초기 스테이트 지정

초기 state는 useReduer Hook에 보내진 두번째 argument이다. 그건 기본 스테이트를 나타내는 것이다. 

 

 

const initialState = { count: 1 }

// wherever our useReducer is located
const [state, dispatch] = useReducer(reducer, initialState, initFunc)

 

만약 useReducer에 세번째 argument를 보내지 않는다면 두번째 argument를 초기 state로 받아들일 것이다. 

세번째 argument는 초기화 function인데 선택사항이다.