useMemo

[React] useMemo 사용하기.

useMemo useMemo는 컴포넌트의 성능을 최적화 할 수 있는, React의 대표적인 Hook으로, Memo는 Memoization을 의미한다. Memoization는 기존의 수행한 연산의 결과값을 어딘가에 저장해두고, 동일한 입력이 들어오면 재사용을 하는 프로그래밍 기법을 의미한다. React의 함수형 컴포넌트는 렌더링 -> Component 함수 호출, 모든 내부 변수의 초기화의 순서를 거치게 되기에, 아래의 예제에 있어서 item이라는 변수의 값은 항상 초기화 되기에, itemValue 함수는 항상 다시 호출된다. 지금은 가벼운 함수지만, 무거운 함수라면, 계속 다시 함수를 호출하는 것은 매우 비효율적이다. function Component(){ const value = itemValue() ..