지연 초기화

지연 초기화에 대해 알게 되었다. 지연 초기화란 값이 실제로 필요할 때까지 초기화 작업을 지연시켜 성능을 최적화하는 방법이다. 리액트의 useState() 초기 값 설정 시에도 () ⇒ {} 콜백 함수를 통해 지연 초기화를 활용할 수 있다.

 

아래의 expensiveCalculation()는 상태 업데이트 요청 시마다, 즉, 컴포넌트가 렌더링될 때마다 호출된다.

const [state, setState] = useState(expensiveCalculation());

 

반면, 아래의 expensiveCalculation()는 초기 렌더링 시에 한 번만 함수를 호출하고 이후 상태 업데이트가 이루어질 때는 다시 이 함수가 호출되지 않는다.

const [state, setState] = useState(() => expensiveCalculation());

 

결과적으로, 지연 초기화를 활용하면 최초 렌더링 시에만 계산되므로 불필요한 연산을 방지한다는 장점이 있다.