리액트 상태와 지연 초기화

지연 초기화(lazy initialization) 란 초기 값을 상태 초기값으로 바로 계산하지 않고, 초기값을 반환하는 함수를 useState에 전달해서 React가 상태를 필요로 할 때만 초기값을 계산하도록 하는 방법이다.

다음 두 코드를 살펴보자.

export default function App() {
  const [count, setCount] = useState(0);

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

const init = () => 0;

export default function App() {
  const [count, setCount] = useState(init);

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

첫 번째 코드는 상태 초기 값을 바로 0으로 전달한다.
두 번째 코드는 init 이라는 함수를 전달하여 상태를 초기화한다.

지금처럼 0을 반환하는 경우 성능 차이가 없지만, 만약 init 함수 내에 무거운 계산이 포함되어 있다면?

그럴 때 지연 초기화 를사용하면 무거운 초기값 계산을 꼭 필요한 시점까지 미룰 수 있어 초기 화면 렌더링 성능 향상에 도움이 된다.

useReducer 는 세 번째 매개변수로 지연 초기화에 필요한 함수를 받는데, 다음과 같다.

const [state, dispatch] = useReducer(reducer, 0, init);

init() 처럼 함수를 호출한 값을 전달하는 것이 아니라, 함수 자체를 전달해야 한다는걸 꼭 기억하자.