글자 4개로 리액트 컴포넌트를 최적화하는 방법

이 글은 React 함수 컴포넌트의 성능을 최적화하는 간단한 방법을 소개합니다. 핵심은 `useState`의 지연 초기화(lazy initialization)를 활용하는 것입니다.

첫 번째 예제에서는 `useState`에 직접 값을 전달하여 컴포넌트가 렌더링될 때마다 `localStorage`에서 값을 읽어오는 코드를 보여줍니다. 반면, 두 번째 예제에서는 `useState`에 함수를 전달하여 초기값을 계산하도록 합니다.

이 함수는 컴포넌트가 처음 렌더링될 때 한 번만 실행되므로, 불필요한 `localStorage` 접근을 줄여 컴포넌트의 렌더링 속도를 향상시킬 수 있습니다. 이는 특히 초기화 로직이 복잡하거나 비용이 많이 드는 경우에 유용합니다.