[React] useReducer

useReducer

이전에 상태관리는 useState를 이용해서 컴포넌트 내부에서 이루어졌습니다.
하지만 useReducer를 이용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리할 수 있습니다.
또한 여러개의 상태관리를 한번에 할 수 있습니다.
자세한 설명은 React 공식문서를 참고바랍니다.
https://ko.reactjs.org/docs/hooks-reference.html#usereducer

useReducer 사용해보기

Info.js

Input.js

Input.js에서 상태관리를 하고 Info.js로 전달해주는 소스코드를 볼 수 있습니다.
위에 설명한대로 컴포넌트에서 상태관리 로직을 분리시키고 따로 상태관리를 하였습니다.
이름, 나이, 색상 모두 Input.js에서 관리를하고 Info로 전달을 시켜줍니다.

App.js

실행화면

 

전체 소스코드는 Github에서 확인 가능합니다.

https://github.com/hanhyung6376/learn-react/tree/master/use-reducer