useReducer 정리

공식문서 보고 정리해보깅~
https://ko.reactjs.org/docs/hooks-reference.html#usereducer

Hooks API Reference – React

---

1. useReducer란?

• useState의 대체 함수이다.
• 다수의 하위값을 포함해 복잡한 정적로직을 만들때
• 다음 state가 이전 state에 의존적인 경우에 선호한다.

---

2. 싫어요 버튼을 만들어보자

  //초기값 설정
  const initialHate = { count: 0 };
  
  // const [state,dispatch] = useReducer(reducer,initialState);
  const [hate, hateDispatch] = useReducer(hateReducer, initialHate);
  
  
  // reducer로 action을 감지하고 상태값을 변경해준다. 
    function hateReducer(hate, action) {
    switch (action.type) {
      case "plus":
        return { count: hate.count + 1 };
      case "minus":
        return { count: hate.count - 1 };
      default:
        throw new Error();
    }
  }
  
  
  // button에서 직접 값을 변경하지 않는다.
  // button클릭시 dispatch로 action의 타입만 전달해준다.
        <Button
            sx={{ width: 50, height: 30 }}
            variant="contained"
            onClick={() => hateDispatch({ type: "minus" })}
          >
            -
          </Button>
  
  
          <Button
            sx={{ width: 50, height: 30 }}
            variant="contained"
            onClick={() => hateDispatch({ type: "plus" })}
          >
           +
          </Button>

1. useReducer를 이용해 초기화한다.
2. hateReducer의
첫번째 인자에 hateReducer,
두번째인자에 초기값을 넣어준다.
3. hateReducer는 Action의 type을 감지해서 hate값을 변경해준다.
4. hateDispatch로 Action의 type을 넘겨준다.

---

Redux의 로직과 비슷하당