React Hook에 빠져보자 (useReducer에 대해서)

uesReducer

기본적으로 여러 개의 하위 값을 포함하는 복잡한 state를 처리해야하는 경우에 용이

선행 개념

• Reducer

State를 업데이트 해주는 역할, 컴포넌트의 state를 업데이트하고 싶다면 reducer를 통해서 진행되어야 합니다.

• Dispatch

reducer에 전달하는 요청

• Action

state를 업데이트하기 위한 액션(내용)

Flow : Dispatch → Action → Reducer → Update State

즉, Dispatch에 Action이라는 내용을 넣어 Reducer에 전달하고 State를 업데이트하게 됩니다. Reducer는 Action의 내용대로 state를 업데이트하게 되겠죠..?

사실 reducer의 개념을 이해하기 위해선 전역 store를 설정하여 (복잡한 상태관리에 최적화된) redux를 사용하는 편이 훨씬 큰 도움이 된다고 생각합니다만, 프로젝트 특성에 따라 redux의 도입을 주저하는 경우에는 차선으로 충분히 고려할만한 기능인 것 같아 소개하고자 합니다.

공식 docs의 예시를 보시죠.

useReducer는 3개의 인자를 받습니다. state와 action을 인자로 받는 콜백함수인 reducer, state의 초기값인 initialArg, lazy initializer를 위한 init입니다.

Counter라는 함수형 컴포넌트에는 useReducer를 정의하는데 reducer와 initialState(초기값)을 인자로 전달하고 있습니다.

해당 dispatch는 button 태그의 onClick함수의 콜백으로 작동하고 있지요.

천천히 살펴보면 버튼이 클릭된 이후 dispatch가 작동함에 따라 action을 switch문으로 판별하고 case에 걸리는 경우를 return하여 state를 업데이트 함을 알 수 있습니다.

즉 기존 useState로 업데이트하는 콜백함수(setState)가 아닌 dispatch로 전달함에 따라 컴포넌트 성능을 보다 최적화시키기에도 용이하다는 것이죠.

마지막으로 init이라는 인자에 대해 살펴보자면, lazy initializer의 역할을 하고 있습니다.

위의 코드는 dispatch의 인자로 {type:’reset’, payload: initialCount} 라는 값을 넘기는데 이 값은 reducer에서 ‘reset’이라는 case에 걸림에 따라 state값이 초기화 됨을 알 수 있습니다. initialCount는 state를 초기화한 값이기 때문이죠. 이는 선언시에 바로 초기화되는 경우와 다르기 때문에 공식문서에서는 이를 ‘초기화 지연'이라는 단어로 설명하고 있습니다. 초기 state의 구체화에 대해선 공식문서에서도 redux와 비교하여 주의사항을 추가적으로 설명하고 있습니다.

주의

React에서는 Reducer의 인자로써 state = initialState와 같은 초기값을 나타내는, Redux에서는 보편화된 관습을 사용하지 않습니다. 때때로 초기값은 props에 의존할 필요가 있어 Hook 호출에서 지정되기도 합니다. 초기값을 나타내는 것이 정말 필요하다면 useReducer(reducer, undefined, reducer)를 호출하는 방법으로 Redux를 모방할 수는 있겠지만, 이 방법을 권장하지는 않습니다.

오늘은 dispatch, action , reducer의 개념에 대해 알아보고 보다 이를 HOOK API를 사용하여 이해해보았습니다.

아직 redux에 대해 이해하지 못하고 계신다면 간단한 프로젝트에서 useReducer를 사용해보시고 필요성에 대해 인지해보시면 큰 도움이 될 것 같네요!