React Hooks의 종류

• useState
• useEffect
• useContext
• useReducer
• useMemo
• useCallback
• useRef
• useImperativeHandle
• useLayoutEffect
• useDebugValue

전편에 이어서 정리 해보도록 하겠다..

useState, useEffect, useContext 정리는 https://velog.io/@kyeongbong/TIL-React-Hooks-1편- 여기있다.

4. useReducer

useReducer는 useState를 대체할 수 있는 Hook이다. useState처럼 State를 관리하고 업데이트 할 수 있는 Hook이다.

• useReducer는 state를 업데이트 하는 부분을 해당 컴포넌트로 부터 분리 시킬수있다.
• useReducer를 사용하는 경우
  • 관리해야 하는 state가 1개 이상일 경우
  • state의 구조가 복잡해질 것 같은때
  • 스케일이 큰 프로젝트의 경우

const initialState = {count: 0}; // 초기값 설정

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      // action의 type이 "increment"일 때, 현재 state 객체의 count에서 1을 더한 값을 반환함
      return {count: state.count + 1};
    case 'decrement':
      // action의 type이 "decrement"일 때, 현재 state 객체의 count에서 1을 뺀 값을 반환함
      return {count: state.count - 1};
    default:
      // 정의되지 않은 친구가 넘어왔을 경우 에러 반환
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

// 리엑트 공식문서 예시

위와 같이 사용한다.

5. useMemo

useMemo는 함수형 컴포넌트 내부에서 발생하는 연산을 최적화 할 수 있다.

import { useMemo } from 'react';

const value = useMemo(() => {
    return calculate();
},[item])
// 첫 번째 인자 콜백함수 
// 두 번째 인자 의존성배열

• 의존성 배열에 값이 업데이트 될때 콜백 함수를 호출해서 memoization 해준다.
• 의존성 배열을 비워둔다면 컴포넌트가 처음 마운트 될때만 값을 계산하고 이후에는 항상 memoization된 값을 사용한다.
• 중요! : 값을 재활용하여 최적화 하는 방식이여서 메모리를 잡아먹는다. 필요할때만 사용해야 한다 그렇지 않으면 오히려 성능이 안좋아질수 있다.

6. useCallback

useCallback 은 useMemo와 비슷하며, 주로 렌더링 성능을 최적화해야 하는 상황에서 사용한다.
useCallBack을 사용하면 이벤트 핸들러 함수를 필요할 때만 생성 할 수 있다.