안녕하세요.

초보 코더입니다.

 

이번에는 useReducer에 대하여 알아볼건데요..

저도 어렵네요.

 

우선 배운 코드는 아래와 같습니다.

 

import React, { useReducer } from "react";

const INCREMENT = "increment";
const DECREMENT = "decrement";

const reduceFunction = (state, action) => {
  if (action === INCREMENT) {
    return { count: state.count + 1 };
  } else {
    return { count: state.count - 1 };
  }
  
  // switch (action.type) {
  //   case INCREMENT:
  //     return { count: state.count + 1 };
  //   case DECREMENT:
  //     return { count: state.count - 1 };
  //   default:
  //     throw new Error();
  // }
};

function App() {
  const [state, dispatch] = useReducer(reduceFunction, { count: 0 });
  return (
    <div>
      <div>{state.count}</div>
      <button onClick={() => dispatch(INCREMENT)}>increment</button>
      <button onClick={() => dispatch(DECREMENT)}>decrement</button>
      
    <!--<button onClick={() => dispatch({ type: INCREMENT })}>increment</button>
    <button onClick={() => dispatch({ type: DECREMENT })}>decrement</button> -->
    </div>
  );
}

export default App;

reduceFunction에서 if문과 switch문과는 동일한 내용입니다.

function App에서 useReducer을 사용하는데요. 

여기서 받는 인자 2개에서 앞에는 fn을 뒤에는 state 초기값으로 보시면됩니다.

 

그리고 useReducer가 실행될때 첫번째 받은 함수(reduceFunction)이 실행되면서 버튼onClick에 있는 dispatch함수가 같이 실행이됩니다. dispatch함수 내 인자를 받게되는데요.

해당 인자가 if문(또는 swich문)에서 조건으로 작용하여 state를 바꾸게 됩니다.

 

그럼 +1 또는 -1이 됩니다!!

 

끝!

 

+ Recent posts