React - 복잡하고 다양한 state 변경에 사용하는 Hooks useReducer

useReducer

리액트 훅 useRedcuer입니다.

useState와 같이 useRedcuer는 상태를 업데이트할 때 사용됩니다.

useRedcuer 언제 사용하는 것이 좋을까요?

• 다양한 state를 이용하거나, 복잡할때 
• 다른 state 기반으로 state를 업데이트 할때

useReducer 사용법

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

reducer

컴포넌트 외부에서 state 관리할 reducer 함수

initialArg

state 초기 값입니다.

init

초기 상태를 반환하는 함수입니다.

 

1. 컴포넌트 내에 useReducer 선언

const [state, dispatch] = React.useReducer(reducer, {
   count: 0
});

2. state 변경이 필요한 곳에서 dispatch 호출

<button onClick={() => dispatch({ type: "count" })}>plus</button>

3. 컴포넌트 외부에서 선언한 reducer 함수에 state 변경 후 return

const reducer = (state, action) => {
  switch (action.type) {
    case "count": {
      return {
        ...state,
        count: state.count + 1
      };
    }
  }
};

전체 코드

const root = ReactDOM.createRoot(document.getElementById("root"));

const reducer = (state, action) => {
  switch (action.type) {
    case "count": {
      return {
        ...state,
        count: state.count + 1
      };
    }
  }
};

function createInitialState() {
  console.log('createInitialState');
  return {
    count: 32
  }
}

function App() {
  const [state, dispatch] = React.useReducer(reducer, {
    count: 0
  });

  return (
    <React.Fragment>
      <p>Hello React {state.count}</p>
      <button onClick={() => dispatch({ type: "count" })}>plus</button>
    </React.Fragment>
  );
}

root.render(<App />);

코드펜

See the Pen useReducer by powerku (@powerku) on CodePen.