React Hooks (3)

useCallback

useMemo와 비슷하지만, deps의 변화에 따라 값을 재사용할지 다시 계산할지를 따지기보다는 함수를 다시 실행할지 아닐지에 쓰임

  const onRemove = useCallback(id => {
    setUsers(users => users.filter(user => user.id !== id));
  }, []);

[]은 역시 deps 부분인데 이 배열안의 값이 변경이 일어나면 useCallback안의 함수가 실행되며 리렌더링 발생 그때, setUsers안에 users => 를 사용하면서, useState를 함수를 통해 값을 바꿔주게 되므로, 따로 deps안에 바뀌는 값을 넣어주지 않아도 됨

useReducer

useState와 마찬가지로 상태를 변경, 업데이트 해주는 Hooks
리듀서 함수를 따로 만든 다음, state와 action을 매개변수로 받고, action에 필시 들어가는 type에 대해 어떤식으로 state를 변경해 변경된 상태를 반환해줄지를 기술하는 Hooks 이 과정에서 type은 바로 위에도 적었지만 반드시 필요

// 선언
function reducer(state, action) {
  switch(action.type){
    case '~~':
      // do Something
    default:
      // do Something
  }
}

이렇게 만들어진 리듀서 함수를 useReducer를 통해 사용

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

여기서 number는 리듀서에 의해 바뀌는 상태값이고, dispatch는 리듀서를 호출해주는 값인데, 반드시 ()안에 액션객체로 안에 type을 넣어줘야 함 이 액션객체를 통해 리듀서를 발생시킴 그리고 useReducer(reducer, 0); 부분에서 0은 number의 초기값, 즉 상태의 초기값을 의미

<div>
  <h1>{number}</h1>
  <button onClick={() => dispatch({ type: 'increase' })}>+1</button>
  <button onClick={() => dispatch({ type: 'decrease' })}>-1</button>
</div>

이런식으로 dispatch를 통해 액션을 발생시키면 reducer함수에서 해당 type에 맞게 state를 변경시켜줌

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