1. useMemo
- 함수형 컴포넌트 내부에서 발생하는 연산을 최적화 할 수 있다.
- Memoization된 값을 return 해주는 hook이다.
memoization이란?
비용이 많이 드는 함수 호출의 결과를 저장하고 동일한 입력이 다시 발생할 때 캐시된 결과를 반환하여 컴퓨터 프로그램의 속도를 높이는 데 주로 사용되는 최적화 기술
UseMemo 사용법
function Component({a, b}) {
const result = compute(a, b)
return <div>{result}</div>
}- 만약 위에서 복잡한 연산을 수행하는 compute라는 함수가 있을때 사용할 수 있다.
function Component({a, b}) {
const result = useMemo(() => compute(a, b), [a, b])
return <div>{result}</div>
}- useMemo로 감싸준 후, 인자로 함수와 Dependencies를 넘겨 받는다.
- 만약 2번째 인자로 넘겨준 의존 인자 중에 하나라도 값이 변경되면, 1번째 인자의 함수를 재실행 한다.
2. useCallback
- React의 렌더링 성능을 위해서 제공되는 Hook
- 컴포넌트가 렌더링 될 때, 내부적으로 사용된 함수가 새롭게 생성되는데, 이 함수가 자식 컴포넌트에 Props로 함수가 넘겨지게 되면, 컴포넌트가 리렌더링 될 때마다 자식 컴포넌트도 리렌더링 되어 불필요한 리렌더링이 일어날 수 있다.
useCallback의 사용
import React, {useSatate} from 'react';
import {saveToServer} from './api';
import UserEdit from './UserEdit';
function Profile(){
const [name, setName] = useState('');
const [age, setAge] = useState(0);
return (
<div>
<p>{`name is ${name}`}</p>
<p>{`age is ${age}`}</p>
<UserEdit
onSave={() => saveToServer(name, age)}
setName={setName}
setAge={setAge}
/>
</div>
);
}- Profile 컴포넌트가 렌더링 될 때마다 UserEdit 컴포넌트의 onSave 속성값으로 새로운 함수가 전달 되는데, UserEdit 컴포넌트에서 React.memo를 사용하도록 전달된 Prop이 항상 바뀌므로 불필요한 렌더링이 발생한다.
function Profile(){
const [name, setName] = useState('');
const [age, setAge] = useState(0);
const onSave = useCallback(() => saveToServer(name, age), [name, age]);
return (
<div>
<p>{`name is ${name}`}</p>
<p>{`age is ${age}`}</p>
<UserEdit onSave={onSave} setName={setName} setAge={setAge} />
</div>
);
}- useMemo와 같이, 함수와 Dependencies를 전달한다.
- 전달된 Dependencies가 바뀌지 않으면 이전에 생성한 함수가 재사용 된다.
- Dependencies에 비어있는 배열을 넣을시, 컴포넌트가 렌더링 될때 단 한번만 함수가 생성된다.
3. React.memo
- React.memo는 Higher-Order Components(HOC) 이다
→ 컴포넌트를 인자로 받아서 새로운 컴포넌트를 return 해주는 구조의 함수 - React.memo는 넘겨받은 props의 변경여부만을 체크한다. 하지만 컴포넌트 내부에서 useState같은 훅을 사용하는 경우, 상태가 변경 되면 리렌더링 된다.
→ props가 바뀌지 않아서 렌더링 하지 않아도 되는 컴포넌트의 렌더링을 막아준다. - useCallback만으로는 하위 컴포넌트의 리렌더링을 막을수 없다.
→ 부모 컴포넌트에서 정의한 useCallback은 자식 컴포넌트에서 사용할 때 효력이 없다.
React.memo의 사용
export default React.memo(component);export 시켜줄 때 컴포넌트를 React.memo로 감싸주는 방법
const Lists = React.memo((props) => {
return ("컴포넌트 렌더링 코드");
})원하는 props의 변경 여부를 확인 하고 싶은 경우 props를 React.memo로 감싸주고 렌더링코드를 return 시킨다.
무분별하게 사용할 시 불필요한 비교연산만 추가되기 때문에
요약
공통점
- React.memo, useMemo, useCallback은 불필요한 렌더링 또는 연산을 제어하는 용도로 성능 최적화에 그 목적이 있다.
차이점
- React.memo는 HOC이고, useMemo와 useCallback은 hook이다.
- React.memo는 클래스형 컴포넌트, 함수형 컴포넌트 모두 사용가능하고, useMemo는 hook이기 때문에 함수형 컴포넌트 안에서만 사용 가능하다.
- React.memo는 컴포넌트전체에 최적화, useMemo와 useCallback은 함수에 최적화
- useMemo는 복잡한 연산을 수행하는 함수의 이전 결과값을 재사용하는 목적이고, useCallback은 함수가 리렌더링 되는 것을 방지하는 목적이다.
반응형