useMemo를 이용한 메모이제이션

프로젝트의 규모가 커지면서 어느 순간 컴포넌트가 다시 렌더링 되는 경우가 굉장히 많아진 것 같다는 느낌을 받았다. 어느정도의 리렌더링이 발생하는지 궁금해서 콘솔에 찍어보았는데, 내 예상보다 훨씬 많은 리렌더링이 발생했다 ㄷㄷㄷ;;

 

state나 prop이 변경되면 리렌더된다는 것을 어디선가 본 것 같은데...(React 왕초보 시절ㅋㅋ 아 근데 사실 지금도 고수는 아님 히히) 사실 정확하게 어느 시점에 다시 렌더되는지는 확실하게 짚고 넘어가지 않아서 이제서야 찾아보았다.

 

컴포넌트가 리렌더링이 되는 시점은 다음과 같다.

• 자신의 상태(state)가 변경될 때
• 부모 컴포넌트가 리렌더링될 때
• 자신이 전달받은 props가 변경될 때
• forceUpdate 함수가 실행될 때

실제로 내 코드에서도 1~3번의 경우가 빈번하게 일어났는데... 이때마다 모든 변수 및 함수가 다시 재계산된다고 하니... ㅎㅎㅎㅎ;; 성능 최적화가 절실한 시기였다!!

 

사실 초기에는 React에 대해 잘 모르기도 했고... 이미 짜여진 코드에서(중간에 투입(?)됨) 코드 따라가며 기능 구현하는 데에만 신경쓰다 보니.. 시간 복잡도는 나름 열심히 계산했지만 이쪽 부분은 신경도 안썼다... (구구절절...) 그러다가 같은 팀 언니가 useMemo를 사용한 것을 보고 엇!! 이게 뭐지 하면서 그때서야 급관심..! 그리고 이렇게 글을 쓰게 됐다 ㅋㅋㅋㅋ

useMemo

컴포넌트가 리렌더링되는 과정에서 항상 새로 계산이 되어야 하는 경우도 있겠지만, 굳이 재계산이 필요하지 않는 경우도 정말 많다. 이렇게 불필요한 경우에 다시 계산하는 건 정말 자원 낭비다!! 이런 경우에 useMemo를 사용하면, 재계산이 필요하지 않을 때 새로 계산을 하지 않고 메모이제이션된 값을 가져올 수 있다!

 

즉, 계산에 필요한 값이 변함이 없으면 실제 계산 결과도 동일하니 기존 값을 재사용하는 것과 같다고 보면 된다. (역으로 그 값에 변화가 생기면 메모이제이션된 값만 다시 계산하게 되는 것이다) 결국 리렌더링이 되어도 useMemo를 사용하여 코드를 작성한다면, 필요한 경우에는 메모이제이션된 값을 가져와 재사용하기 때문에 성능 최적화가 가능하다!

 

useMemo의 사용 방법은 다음과 같다.

 

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

여기서는 의존성 값으로 a, b를 주었기 때문에 a, b에 변화가 있는 경우에는 computeExpensiveValue 함수를 실행하여 재계산이 이루어질 것이고, 변화가 없는 경우에는 이전 값을 재사용하게 된다.

 

앞으로는 useMemo를 잘 활용해서 성능 좋은 코드를 만들 수 있도록 노력해야겠다!~

근데 코드블럭 왜 제대로 적용이 안되지 ????? 

 

출처:

[React] 리액트 (리)렌더링, React.memo

[React] 리액트 (리)렌더링, React.memo

useMemo를 사용하여 연산한 값 재사용하기

17. useMemo 를 사용하여 연산한 값 재사용하기 · GitBook

Hooks API Reference

Hooks API Reference – React