useMemo 사용
React은 다음과 같이 구성되어 있습니다.
- React란?
- React 컴포넌트 만들기
- useState에 대해
- React로 간단한 구구단게임 만들기!
- props가 번거로울 때 Context API를 사용해보자
- React에서 Bootstrap사용하기
- React 페이지 이동시 최상단 스크롤 방법
- React - lazy, Suspense에 대해
- Link와 useNavigate
- useEffect 정리
- Context API 란?
- React에서 Bootstrap 사용하기
- useMemo 사용
- useTransition에 대해서
- useDeferredValue 사용법
useMemo
useMemo는 컴포넌트 성능을 개선하는데 도움을 줄 수 있는 react Hook입니다. Memo는 Memoization이며 기존의 수행한 연산의 결과값을 따로 저장해두고 동일한 입력이 들어오면 재활용하는 것을 의미합니다.
import { useState } from 'react';
function Cal() {
// 오래 걸리는 연산
}
function Test() {
const [count, setCount] = useState(0);
let result = Cal();
return (
<div>
<button onClick={() => { setCount(count + 1) }}> + </button>
</div>
)
}
Cal()이라는 함수가 있는데 이 함수는 연산이 복잡합니다. 이 함수를 Test 컴포넌트 안에서 쓰고 있습니다.
Test컴포넌트안의 버튼을 클릭할 때마다 count라는 state를 1씩 증가시키도록 설정해두었고 버튼을 클릭할 때 마다 state가 변경되니 컴포넌트가 계속 재렌더링됩니다.
그런데 이 떄마다 Cal()함수가 계속해서 실행되기 때문에 비효율적이고 느려질 수 있습니다.
이럴경우 useMemo을 사용하면 좋을 수 있습니다.
useMemo를 사용하면 복잡한 Cal()함수를 반복적으로 실행할 필요가 없습니다.
처음에 계산된 결과를 메모리에 저장하여 컴포넌트가 재렌더링이 되어도 다시 Cal()을 실행하지 않고
이미 계산된 결과를 메모리에서 가져와 재사용할 수 있게 해줍니다.
useMemo는 첫번째 인자로 콜백함수, 두번째 인자로 dependency를 받습니다. 그래서 두번째 인자에 들어간 값이 변경될 때만 콜백함수를 호출해서
메모이제이션된 값을 업데이트하고 다시 메모이제이션을 해줍니다. 만약 두번째 인자가 빈 배열([])이라면 컴포넌트가 로드될 때 1번만 값을 계산하고 이후에는 메모이제이션된 값을
사용합니다.
import { useMemo, useState } from 'react';
function Cal() {
// 오래 걸리는 연산
}
function Test() {
const [count, setCount] = useState(0);
let result = useMemo(() => { return Cal() }, []);
return (
<div>
<button onClick={() => { setCount(count + 1) }}> + </button>
</div>
)
}
일단 useMemo를 import한 후, 위와 같이 코드를 작성해주면 컴포넌트가 로드될 때 1번만 실행할 수 있도록 해줄 수 있습니다. 그러면 재렌더링이 될 때마다 동작하지 않으므로
조금 더 효율적일 수 있습니다.
useEffect처럼 dependency도 설정가능하며 특정한 state, props가 변할 때 실행하게 할 수도 있습니다.
End.