React hook 2

useReducer

useState보다 다양한 컴포넌트 상황에 따라 다양한 상태를
다른 값으로 업데이트해 주고 싶을 때 사용하는 Hook이다.

const reducer = (state, action) => {
    switch(action.type) {
        case 'CHANGE':
            return action.value;
        default:
            return state;
    }
}

const UseReducer = () => {
   const [state, dispatch] = useReducer(reducer, '초기값')

    return (
        <div>
            <h3>{state}</h3>
            <input type='text' value={state} 
	      onChange={(e) => dispatch({
              value: e.target.value, type: 'CHANGE'})} />
        </div>
    )
}

리듀서는 현재 상태 그리고 업데이트를 위해 필요한 정보를
담은 액션값을 전달받아 새로운 상태를 반환하는 함수로
새로운 상태를 만들 때는 반드시 불변성을 지켜주어야 한다.

useCallback

컴포넌트가 다시 렌더링 될 때 컴포넌트 안에 선언된 함수들을 새로 생성하게 되는데
렌더링 될 때마다 불필요하게 함수가 계속해서 새로 생성된다는 뜻이다.

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

💁‍♂ useCallback 안에서 바뀌어야하는 값은 두번째 배열 인자에 넣어줘야 한다. 그렇지 않으면 useCallback 함수가 처음 값만 기억을 해서 state가 바뀌지 않는다

useMemo

특정값이 변경된게 아니라면 다시 계산하지 않기 위한 hook 함수
함수 결과값을 기억하여 불필요한 함수 호출을 줄여준다.

const memoizedValue = useMemo(() =>
      computeExpensiveValue(a, b), [a, b]);

위와같이 useMemo는 의존성이 변경되었을 때에만 메모제이션된 값만 다시 계산 한다.
이 최적화는 모든 렌더링 시의 고비용 계산을 방지하게 해 준다.

메모제이션(Memoization)

• 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법.
• 중복 연산을 피할 수 있기 때문에 메모리를 더 사용하는 경향이 있어도 성능 측면에서 큰 이점이 있어서 알고리즘 성능 최적화에 많이 사용된다.