React 성능 최적화 방법 3가지

성능 최적화

1. React.memo

• 컴포넌트 성능 최적화.
• 자식 컴포넌트의 불필요한 렌더링을 막아줌.
• 사용법: 원하는 컴포넌트를 React.memo로 감싸줌.
• 리렌더링을 막기 위한 도구라기보다는 성능 개선의 도구라고 생각하자!
• React Profiler 확장 설치하기

• 참고 : React가 리렌더링 되는 경우

1. state 변경 시
2. 부모 컴포넌트 렌더링 시
3. 새로운 props 들어올 시
4. shouldComponentUpdate에서 true가 반환될 시

const Component = React.memo(() => {
  // component 
})

✅ 메모이제이션 (Memoization)

• 주어진 입력값에 대한 결과를 저장함으로써 같은 입력값에 대해 함수가 한 번만 실행되는 것을 보장함.
  
• 처음 렌더링 시 결과를 메모이징 함.
• 다음 렌더링 시에 props가 같으면 재사용함.

1️⃣ Props 비교 방식 수정하기

• 비교 방식을 원하는 대로 수정하고 싶다면, React.memo()의 두 번째 매개변수로 비교 함수를 넣어줌.

React.memo(Component, [compareFunction(prevProps, nextProps)]);

function compareFunction(prevProps, nextProps) {
return (
prevProps.a === nextProps.a &&
prevProps.b === nextProps.b
); // 둘다 true면 props가 동일함 -> return true -> 렌더링 비교하지 않음.
}

> 2️⃣ React.memo 사용을 지양해야 하는 경우
- 렌더링 될 때, props가 다른 경우가 대부분인 경우
- 즉, props가 자주 변하는 컴포넌트는 메모이징을 해도 이점이 없다!
(이전, 다음 props를 비교하여 false면 이전 렌더링 내용과 다음 렌더링 내용을 비교함)


- React.memo에서는 `얕은 비교(Shallow Equal)`를 통해 Props를 비교함.
> ✅'얕은 비교'란?
- 원시 자료형 (Number, String 등)은 값을 비교.
- 참조 자료형 (Array, Object 등)은 참조값을 비교.


- 객체 복사 후, 값을 변경해줘야 함.
``` js
const arr = [1, 2, 3, 4, 5];
const copy = [...arr].push(6);

cf> 깊은 비교 (deep equal)

• Object depth가 깊지 않다면, JSON.stringify 사용
• 깊다면, lodash의 isEqual 사용하여 비교하자.

const obj1 = {a: 1, b: 2};
const obj2 = {a: 1, b: 2};

console.log(obj1 === obj2); // false
console.log(JSON.stringify(obj1) === JSON.stringify(obj2)); // true

2. useCallback

• 함수 최적화.
• 컴포넌트 리렌더링 시 그 안에 있는 함수도 다시 만들게 됨.

import { useCallback } from 'react';

const Button = useCallback(() => {
  const onClickBtn = () => {
      // Function
  }, []); // deps -> 의존성 배열
  
  return (
      <Child onClickBtn={onClickBtn} />
  );
}

const Child = ({onClickBtn}) => {
  // onClickBtn
  return (); 

}

✅ deps 배열 (의존성 배열)

• 의존성 배열 안에 값이 바뀌지 않으면 메모이제이션 된 함수 그대로 사용. (재생성 X)
• deps 배열이 빈 배열이면, 최초 렌더링 시에만 생성됨.

3. useMemo

• 함수 호출의 결과를 저장하고 동일 입력이 발생할 때 마다 결과를 반환하여 재사용.

const Component = ({a, b}) => {
  const result = useMemo(() => compute(a, b), [a, b]); // useMemo(() => ) 의 형식. 
  return <div>result</div>
}