React 성능 최적화 훅 useMemo
우리가 살펴볼 첫 번째 성능 최적화 훅은
useMemo입니다.
이 훅은 화면 재렌더링 사이에 리소스 집약적인 작업의 결과를 캐시하는 데 도움을 주며, 따라서 불필요한 복잡한 계산을 피할 수 있게 합니다. 이러한 캐싱을 메모이제이션이라고도 합니다.
작동 방식을 살펴보겠습니다. 버튼과
h3 제목이 있는 컴포넌트를 만들어 봅시다:
return (
<div>
<h3>텍스트</h3>
<button>클릭</button>
</div>
);
이제 제목을 클릭하면 색상이 주황색에서
녹색으로 그리고 다시 되돌아가도록 만들어 보겠습니다. 먼저
isGreen 상태를 만들어 봅시다:
const [isGreen, setIsGreen] = useState(false);
제목의 style 속성에
제목 색상 변경 조건을 추가하고
클릭 핸들러를 연결하겠습니다:
<h3 onClick={() => setIsGreen(!isGreen)}
style={{ color: isGreen ? 'green' : 'orangered' }}
>텍스트</h3>
또한 우리 버튼을 클릭할 때마다 증가하는 어떤 값을 만들어 봅시다. 이를 위한 상태를 만들겠습니다:
const [num, setNum] = useState(0);
버튼 클릭 처리를 추가하겠습니다:
<button onClick={() => setNum(num + 1)}>
클릭 수
</button>
또한 num 값의 제곱을 반환하는
함수 square가 있다고 가정해 보겠습니다. 함수 호출의
결과는 변수 result에 기록합니다:
const result = square(num);
function square(num) {
return num * num;
}
버튼 텍스트에 result를 표시해 보겠습니다:
<button onClick={() => setNum(num + 1)}>
클릭 수: {result}
</button>
결과적으로 다음과 같은 동작이 만들어졌습니다:
버튼을 클릭하면 num 값이 변경되고,
그 값이 제곱되며, 제목을 클릭하면
제목 색상이 변경됩니다.
우리의 컴포넌트는 매우 작고, 제목을 클릭하여 색상을 변경할 때마다 전체 컴포넌트가 다시 렌더링되고, 따라서 버튼과 연결된 계산들도 다시 수행되지만, 심지어 우리가 그 버튼을 건드리지 않았음에도 불구하고 모든 것이 빠르게 작동합니다. 만약 우리의 계산이 복잡하고 매번 모든 것을 다시 계산해야 한다면 상상해 보십시오.
함수를 약간 무겁게 만들어 보겠습니다. 이제 조금 더 오래 생각하도록 만들어 볼 것입니다. 이렇게 하면 오래 걸리는 계산을 시뮬레이션할 수 있습니다:
function square(num) {
let startTime = performance.now();
while (performance.now() - startTime < 500) {
// 아무것도 하지 않음...
}
return num * num;
}
이제 제목을 클릭해 보십시오. 함수
square의 긴 작업 시간 때문에
(그리고 우리는 버튼을 건드리지 않았습니다!)
제목 색상이 변경되기 위해 영원히 기다려야 합니다!
이때 useMemo 훅이 우리를 도와줍니다. 이를 위해,
첫 번째 매개변수로 캐시하고 싶은 값을 계산하는 함수를 전달해야 합니다.
이 함수는 순수 함수여야 하며
매개변수를 받지 않아야 합니다. 두 번째
매개변수로는 대괄호 안의 의존성 배열, 즉 함수 코드에 참여하는 모든
반응형 값들을 전달합니다. 따라서, 이제 result
안에 다음과 같은 구문을 작성하겠습니다:
const result = useMemo(() => square(num), [num]);
다시 제목을 클릭해 보십시오. 이제,
계산이 있는 버튼을 건드리지 않고
상태 num 값을 변경하지 않으면, 아무것도 다시 계산되지 않으며,
React는 버튼에 캐시된 값을 표시하므로, 우리의 제목이
빠르게 색상을 변경합니다.
컴포넌트 App를 만들고
그 안에 단락을 배치하십시오. 초기값이 'react'인
상태 text를 만들고,
상태 값을 단락 텍스트로 표시하도록 하십시오. 단락을 클릭하면
텍스트 끝에 느낌표가 추가되도록 하십시오.
초기값이 0인 또 다른 상태 num를 만드십시오.
App에 또 다른 단락을 배치하십시오. 단락을 클릭하면
num이 1씩 증가하도록 만드십시오.
이제 App에 num을 매개변수로 받아
그 값을 세 배로 반환하는 함수
triple를 추가하십시오.
함수 호출 결과를 변수 result에 넣으십시오.
두 번째 단락의 텍스트로 result를 표시하십시오. 단락들을 번갈아 클릭하며,
느낌표가 느리게 추가되는 것을 확인하십시오.
느린 함수 triple를 useMemo로 감싸서
상황을 해결하십시오.
