[React] useMemo를 활용하여 성능을 향상시켜보자.

최근 React를 활용한 웹사이트를 만드는 데, 급격한 스크롤을 할 시 성능이 급격하게 내려간 현상을 발견할 수 있었다. 마우스 관련 이벤트에 쓰로틀을 걸어도, 디바운스를 활용해도 성능이 개선되지 않았으나, useMemo를 활용하여 성능을 개선시킬 수 있었다. 그 컴포넌트는 무거운 연산을 하는데 컴포넌트가 다시 렌더링될때마다 다시 무거운 연산을 하기 때문이었던걸로 문제가 발생했기 때문이다. useMemo을 활용한 성능 차이를 알아보자. 1. useMemo useMemo는 React에서 공식적으로 제공하는 hook의 일종으로, 컴포넌트에서 이미 계산된 값을 재사용할 시 활용가능한 함수이다. 즉, 만약 어떠한 이벤트 때문에 React가 컴포넌트를 리렌더링해야 하는 경우 useMemo를 활용하여 자원이 많이 ..

원문링크 : [React] useMemo를 활용하여 성능을 향상시켜보자.