본문 바로가기

React

[React] - useReducer

 

* useReducer

 

- useReducer 훅을 사용하면 컴포넌트의 상탯값을 리덕스의 리듀서처럼 관리할 수 있다.

 

 

 

 

- 위 예제에서 reducer는 리덕스와 같은 방식으로 작성하였다.

 

- useReducer 훅의 매개변수로 앞에서 작성한 리듀서와 초기 상탯값을 입력한다 useReducer 훅은 상탯값과 dispatch 함수를 차례대로 반환다.

 

- 여기서 dispatch는 리덕스의 dispatch와 같은 방법으로 사용한다.

 

- 보통 상위 컴포넌트에서 다수의 상탯값을 관리한다 이때 자식 컴포넌트로부터 발생한 이벤트에서 상위 컴포넌트의 상탯값을 변경해야 하는 경우가 많다 이를 위해 상위 컴포넌트에서 트리와 깊은 곳 까지 이벤트 처리 함수를 전달한다 이러한 작업은 상당히 손이 많이 가고 코드의 가독성도 떨어진다.

 

- useReducer훅과 Context Api 를 이용하면 상위 컴포넌트에서 트리의 깊은 곳으로 이벤트 처리 함수를 쉽게 전달할 수 있다.

'React' 카테고리의 다른 글

[React] - useEffect 훅 실전 활용법(2)  (0) 2022.10.10
[React] - useEffect 실전 활용법 (1)  (0) 2022.10.03
[React] - useMemo, useCallback  (0) 2022.08.06
[React] - ref 알아보기  (0) 2022.07.20
[React] - Context API  (0) 2022.07.12