useReducer

얘는 진짜 말 그대로 어떤 값에 대한 모든 행동(로직)들을 응축시키기 위해 만든 느낌이다.

 

const [count, dispatch] = useReducer(reducer, 0);

const [값, 상태변화하고싶을시쓸함수이름] = useReducer(실행할콜백, 초기값);

이게 저 값이라는 것에 대한 모든 상태변화를 저 실행할 콜백에서 관리하는 거다.

 

  <button onClick={()=>{
    dispatch({
      type:"INCREASE",
      data:1
    })
  }}>+ 1</button>

이런 식으로.

저 dispatch 안에 값을 넣을 수 있다.

보통 저렇게 객체형식으로 넣는다. 이렇게 객체 형식으로 넣는 이유는,

function reducer(state, action){
  switch(action.type){
    case "INCREASE":
      return state + action.data;
    case "DECREASE":
      return state - action.data;
    default:
      return state;
  }
}

저 콜백으로 넣은 저 함수에,

저렇게 state와 action을 인자로 준다.

 

state는 현재 수, 즉 count이다. 그냥 count로 쓰면 되지 않나? 라고 생각을 했었는데, 아예 딱 분리해 놓고 싶어서 그런가? 라는 생각이 들었다.

state가 참조할 현재의 상태, 즉 값, 데이터이고, 

return을 하면 저 state가 그 값, 즉 count가 그 return한 값으로 바뀐다.

 

function reducer(state, action){
  switch(action.type){
    case "INCREASE":
      return state + action.data;
    case "DECREASE":
      return state - action.data;
    default:
      return state;
  }
}

function TestComp(){
  const [count, dispatch] = useReducer(reducer, 0);
  return(
    <>
      <h4>테스트 컴포넌트</h4>
      <div>
        <span>{count}</span>
      </div>
      <button onClick={()=>{
        dispatch({
          type:"INCREASE",
          data:1
        })
      }}>+ 1</button>

      <button onClick={()=>{
        dispatch({
          type:"DECREASE",
          data:1
        })
      }}>- 1</button>

    </>
  )
}

이런 식으로.

dispatch가 상태변화를 촉발시키고 싶을때 쓰는 함수, 즉 트리거 역할

reduce, 저 콜백이 저 트리거가 당겨졌을때 실행될 함수.

저 콜백에다가 

콜백(현재값, 트리거에넣은인자){

}

이렇게 담아주는 거임.

 

그래서 return으로 최종적으로 현재값으로부터 바꾸고싶은 값을 return 시켜버리면 됨.

 

1부터 10까지 저 데이터를 위한 행동을 응축하고 싶을 때