20221104 React Hooks - useReducer

Hook의 규칙

• React 함수 구성 요소 내에서만 호출할 수 있음(반드시 Functional Component 안에서 사용해야 함)
• 구성 요소의 최상위에서만 호출할 수 있음
• 조건문, 반복문 안에서 못 씀

useReducer 

 - useState의 대체함수

- 콜백 대신 디스패치를 전달 할 수 있기 때문에 자세한 업데이트를 트리거 하는 컴포넌트의 성능을 최적화 할 수 있음

- useReducer를 사용할 때

• 다수의 하윗값을 포함하는 복잡한 정적 로직을 만드는 경우
• state가 이전 state에 의존적인 경우에 보통 useState보다 useReducer를 선호

reducer : state를 업데이트 해주는 역할

dispatch: state 업데이트를 위한 요구

action: 요구의 내용

디스패치로 액션(요구,조건)을 함 > 리듀서서를 통해서 > 스테이트가 업데이트

dispatch(Actoin) > Reducer(State, Action)  > State Update

 

import { useReducer } from "react";

const [state, dispatch] = useReducer(reducer, initialArg, init);

const initialState = {count: 0};

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

 

 

참고자료 및 출저

https://ko.reactjs.org/docs/hooks-reference.html#usereducer

Hooks API Reference – React

https://www.w3schools.com/react/react_usereducer.asp

React useReducer Hook