3관문. Lazy Initialization

관문 3 / 7

컴포넌트가 마운트될 때만 초기값 계산 함수를 실행하도록 Lazy Initialization을 적용하라.

📖 이론 비급

Lazy Initialization: 초기화 비용 단 한 번

useState(expensiveCalc())는 매 렌더마다 expensiveCalc()를 호출한다. 초기값으로 사용될 뿐인데 불필요한 비용이 매번 발생한다.

해결책: useState(() => expensiveCalc())처럼 함수를 전달하면 리액트가 최초 마운트 시에만 그 함수를 실행한다. localStorage 읽기, 복잡한 배열 가공 등에 필수적으로 적용하라.

⚔️ 수련 코드

import { useState } from 'react';

function expensiveInit() {
  // 1만 번 루프로 초기화 비용을 시뮬레이션
  let result = 0;
  for (let i = 0; i < 10000; i++) result += i;
  console.log('초기화 실행됨!');
  return result;
}

export default function LazyDemo() {
  // 문제: 매 렌더마다 expensiveInit()이 호출된다
  const [value, setValue] = useState(expensiveInit());

  return (
    <div>
      <p>초기값: {value}</p>
      <button onClick={() => setValue(v => v + 1)}>+1</button>
    </div>
  );
}

Open Sandbox