[React] 리액트로 성능 개선하기 1 - useMemo

1. 리액트에서 성능 개선을 해보자

성능 개선 / 최적화를 위한 기능으로 다양한 훅을 제공하고 있다. 

그중에서 useMemo / useCallback / React.memo 3가지에 대해서 공부하고 정리하겠다.

 

2. useMemo 

• memo : memorization 의 약자로 기존에 수행한 연산의 결과값을 어딘가에 저장해 두고 동일하게 입력이 들어오면 재활용하는 프로그래밍 기법이다.

 

2-1. useMemo의 장점 : 무거운 동작 과정을 가볍게 바꿔준다.

• 함수형 컴포넌트의 동작 과정 : 렌더링 -> Componenet 함수 호출 -> 모든 내부 변수 초기화
• useMemo 사용 후 동작 과정 : 렌더링 -> Component 함수 호출 -> Memorize 된 함수를 재사용

내부변수 초기화를 위한 함수를 호출해야한다고 할 때, 평소에는 반복적으로 실행하지만 useMemo를 쓰면 반복적으로 실행할 필요가 없다. 

" 처음에 계산된 결괏값을 메모리에 저장해서 컴포넌트가 반복적으로 렌더링 되어도 이전에 계산된 값을 메모리에 꺼내와서 재사용하게 된다."

 

2-2. useMemo의 구조

• 첫번째 인자 : 콜백함수
• 두번재 인자 : 의존성 배열로 배열의 요소 값이 업데이트될 때만 콜백함수를 다시 호출해 memo된 값을 업데이트 해줘 다시 memo 해줌 / 빈 배열일 경우, 맨 처음 컴포넌트가 마운트 되어있을 때만 값을 계산하고 이후에는 항상 memo된 값만 꺼내와 사용

 

2-3. 주의점

불필요한 값까지 모두 memo하면 오히려 성능이 안좋아질 수 있다.

3. 출처

https://itprogramming119.tistory.com/entry/React-useMemo-%EC%82%AC%EC%9A%A9%EB%B2%95-%EB%B0%8F-%EC%98%88%EC%A0%9C

[React] useMemo 사용법 및 예제