07. React 성능 — Render → Re-render → memo → useMemo → useCallback

memo 써야 하나?
useMemo 써야 하나?
useCallback 써야 하나?

State 변경
    ↓
React Render
    ↓
Reconciliation
    ↓
Commit
    ↓
DOM 변경
    ↓
Browser Rendering
    ↓
화면

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

<button>
  0
</button>

count: 0
   ↓
setCount(1)
   ↓
React가 다시 컴포넌트를 실행
   ↓
<button>
  1
</button>

const [count, setCount] = useState(0);

setCount(1);

function Parent() {
  const [count, setCount] = useState(0);

  return (
    <>
      <button onClick={() => setCount(count + 1)}>
        {count}
      </button>

      <Child />
    </>
  );
}

function Child() {
  console.log("Child render");

  return <div>Child</div>;
}

Parent State 변경
      ↓
Parent Re-render
      ↓
Child도 다시 평가될 수 있음

Child render

function Child() {
  return <div>Hello</div>;
}

<div>Hello</div>

이전 결과
<div>Hello</div>

       ↓ 비교

새로운 결과
<div>Hello</div>

Component Re-render
        ↓
React가 컴포넌트를 다시 실행

React Reconciliation
        ↓
이전 UI 결과와 새로운 UI 결과를 비교

DOM Update
        ↓
실제로 DOM에 변경사항을 적용

DOM Update
   ↓
Layout
   ↓
Paint
   ↓
Composite

function Child() {
  return <div>Hello</div>;
}

function WorkList({ data }) {
  const filteredData = data
    .filter(...)
    .sort(...)
    .map(...);

  return <Table data={filteredData} />;
}

State 변경
    ↓
WorkList Re-render
    ↓
filter
    ↓
sort
    ↓
map
    ↓
Table 계산

function Parent() {
  const [count, setCount] = useState(0);

  return (
    <>
      <button onClick={() => setCount(count + 1)}>
        {count}
      </button>

      <Child name="Yonghee" />
    </>
  );
}

name="Yonghee"

const Child = memo(function Child({ name }) {
  console.log("Child render");

  return <div>{name}</div>;
});

Parent Re-render
      ↓
Child Props 비교
      ↓
Props가 동일
      ↓
Child Re-render 생략 가능

function Parent() {
  const user = {
    name: "Yonghee"
  };

  return <Child user={user} />;
}

const user = {
  name: "Yonghee"
};

첫 번째 Render

user → 객체 A

두 번째 Render

user → 객체 B

A.name === B.name

A !== B

function Parent() {
  const handleClick = () => {
    console.log("click");
  };

  return <Child onClick={handleClick} />;
}

첫 번째 Render

handleClick → 함수 A

두 번째 Render

handleClick → 함수 B

A !== B

const Child = memo(function Child({ onClick }) {
  ...
});

const handleClick = useCallback(() => {
  console.log("click");
}, []);

첫 번째 Render
      ↓
함수 A 생성

두 번째 Render
      ↓
같은 함수 A 사용

세 번째 Render
      ↓
같은 함수 A 사용

const Child = memo(function Child({ onClick }) {
  ...
});

Parent Re-render
      ↓
handleClick 참조 유지
      ↓
Child Props 동일
      ↓
memo가 Child Re-render를 생략할 수 있음

const filteredData = useMemo(() => {
  return data
    .filter(item => item.name.includes(keyword))
    .sort(...);
}, [data, keyword]);

data 또는 keyword 변경
        ↓
계산 다시 수행

둘 다 동일
        ↓
이전에 계산한 결과 재사용

useMemo
→ 계산한 "값"을 기억

useCallback
→ "함수"를 기억

const result = useMemo(
  () => expensiveCalculation(data),
  [data]
);

const handleClick = useCallback(
  () => handleSelect(id),
  [id]
);

const value = useMemo(() => 1 + 1, []);

const handleClick = useCallback(() => {
  console.log("click");
}, []);

리렌더링 발생
    ↓
왜 발생했는가?
    ↓
비용이 큰가?
    ↓
어디에서 비용이 발생하는가?
    ↓
그 비용을 줄일 수 있는가?

function Component() {
  console.log("render");

  return <div>Hello</div>;
}

Render
  ↓
Reconciliation
  ↓
변경사항 발견
  ↓
DOM Update

DOM / Style 변경
      ↓
Layout
      ↓
Paint
      ↓
Composite

WorkList
 ├── Search
 ├── Filter
 ├── Sort
 ├── Table
 │    ├── Row
 │    ├── Row
 │    ├── Row
 │    └── ...
 └── Pagination

useMemo
useCallback
memo

1. 어떤 컴포넌트가 다시 렌더링되는가?

2. 왜 다시 렌더링되는가?

3. 실제로 렌더링 비용이 큰 컴포넌트는 어디인가?

4. Props가 매번 새로운 참조가 되고 있는가?

5. 계산 자체가 비싼가?

6. DOM 변경이 많이 발생하는가?

컴포넌트 자체의 불필요한 실행
        ↓
React.memo

비싼 계산 반복
        ↓
useMemo

함수 참조가 계속 변경
        ↓
useCallback

렌더링해야 하는 데이터 자체가 너무 많음
        ↓
Virtualization / Pagination 등 구조적 해결

memo
useMemo
useCallback

❌ "리렌더링이 발생하니까 memo를 사용한다."

⭕ "이 컴포넌트의 렌더링 비용이 크고,
    Props가 자주 변경되지 않기 때문에 memo를 사용한다."

문제 발견
   ↓
원인 분석
   ↓
비용 확인
   ↓
최적화 방법 선택
   ↓
개선 결과 확인

사용자 이벤트
      ↓
JavaScript 실행
      ↓
State 변경
      ↓
React Re-render
      ↓
Reconciliation
      ↓
Commit
      ↓
필요한 DOM 변경
      ↓
Browser Rendering
      ↓
Layout
      ↓
Paint
      ↓
Composite
      ↓
화면

JavaScript 계산이 무거운가?
        ↓
Main Thread 비용

React Render가 많은가?
        ↓
memo / 컴포넌트 구조 검토

계산이 반복되는가?
        ↓
useMemo 검토

함수 참조가 계속 변경되는가?
        ↓
useCallback 검토

DOM에 그리는 양이 너무 많은가?
        ↓
렌더링 구조 / Virtualization 검토

브라우저 렌더링 비용이 큰가?
        ↓
Layout / Paint / Composite 분석

memo
useMemo
useCallback

State / Props 변경
       ↓
Re-render
       ↓
Reconciliation
       ↓
Commit
       ↓
DOM 변경
       ↓
Browser Rendering

React 애플리케이션이 처음 실행될 때
JavaScript를 전부 받아야 하는가?

Code Splitting
    ↓
Dynamic Import
    ↓
React.lazy
    ↓
Suspense
    ↓
초기 로딩 최적화