React 최적화

React가 렌더링 될때

React 컴포넌트가 렌더링을 수행하는 시점
1. Props 변경
2. State가 변경
3. forceUpdate()를 실행할때
4. 부모 컴포넌트가 렌더링 되었을 때

컴포넌트의 렌더링은 보여지는 부분을 변경하기 위해 되는 것 인데,
뷰가 바뀌지 않는데 리렌더링이 발생한다면 이는 불필요한 렌더링이 발생되는 것 입니다.
많은 리렌더링은 성능이 저하 될 수 있습니다.

컴포넌트가 최소한으로 렌더링 되기 위해서 최적화 작업을 하는 것이 중요합니다.

1. useCallback
2. useMemo
3. useEffect
4. React.memo

useEffect

useEffect는 사이드 이팩트를 처리합니다.
모든 컴포넌트가 렌더링된 후 (ComponentDidMount 시점)
사이드 이팩트를 처리합니다(상태변화, 구독, 타이머, 로깅 등)

useEffect(() => {
	// ... 상태변화, 구독, 타이머, 로깅 등
}, []) // 빈배열이면 ComponentDidMount 와 동일하게 최초 렌더링 후 딱 한번 실행

useCallback

컴포넌트는 리렌더링될 때마다 선언된 함수를 매번 새로 만들어진 함수로 생성합니다.(즉, 주소값이 바뀜)
하지만 useCallback은 함수가 재생성 되는 것을 방지해줍니다.(특정 함수를 새로 만들지 않고 재사용, 즉 종속성 배열이 변경되지 않았다면 동일한 주소값을 가진 함수를 재사용할 수 있다.)

두번째 파라미터에 비어있는 배열을 넣으면 => 컴포넌트가 렌더링될 때 만들었던 함수를 계속해서 재사용
두번째 파라미터에 어떤 값을 넣게되면 => 해당 값이 변경되었을 때 함수를 새로생성

const callback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b], // 두번째 파라미터, 종속성 배열
);

함수와 종속성 배열을 매개변수로 전달받으면 메모이제이션된 콜백을 반환하기 때문에 부모 컴포넌트가 자식 컴포넌트의 렌더링을 방지하기 위해 자식 컴포넌트에 콜백을 전달할 때 매우 유용합니다.

useMemo

useMemo는 함수형 컴포넌트의 내부 연산이 많아지면 이전 결과값을 재사용하여 연산을 최적화할 수 있습니다.
useCallback과 유사하게 함수와 종속성 배열을 전달받습니다.
하지만 useCallback과는 다르게 메모제이션된 값을 반환합니다.
똑같이 종속성 배열에 영향을 받습니다.
렌더링하는 과정에서 특정 값이 바뀌었을 때만 연산을 실행하고, 값이 바뀌지 않았다면 이전에 연산했던 결과를 재사용합니다.

React.memo(HOC)

React.memo는 같은 prop로 렌더링이 자주 일어날 때 이전 값을 재사용 합니다.
이는 useCallback과 useMemo랑 비슷한데
React.memo는 HOC이기 때문에 클래스형 컴포넌트, 함수형 컴포넌트 모두 사용가능하지만
hook은 함수형 컴포넌트 안에서만 사용가능 하다는 차이점이 있습니다.