ReactJS, Reducer

useReducer – React

프로토 타입 및 사용법은 위 북마크 참조!

 

Reducer를 언제 왜 사용하는지 알아봅시다.

 

Reducer는 하나의 State에 관련해서 다양한 로직이 있는 경우에 사용합니다.

 

다음과 같이 To Do 객체에 관 State가 있다고 가정해봅시다.

 

ToDo State와 Set 로직

하나의 State에 Set하는 Event Handler 함수들이 늘어남에 따라 복잡한 로직들이 우후죽순 늘어나게 됩니다.

 

State를 설정할 수 있는 로직들이 쌓이다보면 어디서 state값이 변했는지 알기 어려운 경우가 생기기 마련입니다.

 

함수 하나를 통해 미리 지정한 인자대로 입력을 받고 State값을 변환하는 것이 Reducer 입니다.

 

마치 디멀티플렉서 같은 구조입니다

Reducer

 

이를 통해 입력과 출력이 단조로워져 어디에서 변환되었는지 확인하기 좋은 구조가 된다는 것이죠.

 

Reducer는 Action에서 Type을 지정하여 특정 로직을 실행하고 로직에 맞는 인자를 자바스크립트 객체로 넘깁니다.

 

💡 오히려 과정이 복잡해진것 아닌가요?

 

State와 관련된 Event Handler가 적다면 그럴 수 있겠지요!

 

Handler 함수가 늘어나게 되면 특정 State에 대한 값에 Reducer 함수만 들여다보면 디버깅을 할 수 있습니다.

 

우리가 State를 하나만 쓰지도 State를 관련된 함수를 하나만 쓰지도 않으니까요!

 

코드의 복잡도가 올라가면 올라갈 수록 State는 빛을 발하게 됩니다.

 

결론은 Reducer를 쓸지는 취향인 것 같습니다.

 

복잡도가 높다면 useState에서 useReducer를 써보는게 어떨까요?!

 

다음은 state로직을 reducer로 바꾸는 튜토리얼입니다 참고해보세요 :)

state 로직을 reducer로 작성하기 – React