훅

[React] 컴포넌트 성능 최적화를 위한 useMemo

오늘은 리액트에서 컴포넌트의 성능을 최적화 하는데 사용하는 훅인 useMemo에 대해서 기록해보려한다. 1. useMemo useMemo는 컴포넌트의 성능을 최적화시킬 수 있는 대표적인 리액트 훅 중 하나이다. memo는 memoization으로 '메모리에 넣기'라는 의미이다. 동일한 값을 반환하는 함수를 반복적으로 호출해야 한다면 처음 수행했던 결과값을 메모리에 저장해두고, 동일한 입력이 들어오면 메모리에서 꺼내 재사용하는 것이다. 함수형 컴포넌트에서는 '컴포넌트 렌더링 -> 컴포넌트 함수 호출 -> 모든 내부 변수 초기화' 의 순서를 거치는데, 이 말은 컴포넌트가 렌더링 될 때마 변수들이 모두 초기화 되기 때문에 함수가 반복적으로 호출이 된다는 의미이다. 예를들어 아래와 같은 코드에서 렌더링 될 때마..