[react] 성능 최적화

react.memo

usememo

usecallback 에 대해서 알아보자

 

react.memo

리액트는 컴포넌트를 렌더링 한뒤 이전의 렌더링된 결과와 비교후 변경된 사항을 확인한뒤 dom 을 업데이트 해준다.

개발자는 이전의 컴포넌트와 비교가 필요하지 않은 경우를 알고 있기 때문에 그러한 경우에는 컴포넌트를 react.memo() 로 래핑 해줄수 있다. 그렇게 하면 리액트는 컴포넌트를 렌더링 한뒤 그 결과를 기억(memoizing) 하기 때문에 새롭게 렌더링 하고 이전과 비교하는 과정을 생략할 수있게된다. (재사용)

이러한 memoizing 은 props 가 같을 대에만 적용이 되기 때문에 props 가 바뀌면 기존의 작업을 수행한다.

export function Movie({ title, releaseDate }) {
  return (
    <div>
      <div>Movie title: {title}</div>
      <div>Release date: {releaseDate}</div>
    </div>
  );
}

export const MemoizedMovie = React.memo(Movie);

 

useMemo

usememo 는 계산량이 많은 함수의 반환값을 기억할수 있다.

import React, {useMemo} from 'react';
import { runExpensiveJob } from './util';

function MyComponent({v1, v2}) {
  const value = useMemo(() => runExpensiveJob(v1,v2), [v1, v2]);
  return <p>{`value is ${value}`}</p>;
}

사용법은 useEffect 와 비슷하다. 첫번째 인자로 기존의 함수가 들어간다. 첫번째 인자로 들어오는 함수값은 memoizing 된다.

메모이징(기억) 된 값은 해당 컴포넌트가 리렌더링 될때 재선언 이후 실행 되지 않고 기억된 값을 사용한다.

 

두번째 인자는 의존성 배열이 들어온다. 의존성 배열에 해당하는 값이 바뀌게 되면 첫번재 인자로 들어오는 함수는 재선언뒤 다시 값을 반환 하고 그값을 기억한다.

 

useCallback

useMemo 는 특정 결과값을 재사용 할 때 사용하는 반면, useCallback 은 특정 함수를 새로 만들지 않고 재사용하고 싶을때 사용합니다.

 

컴포넌트 내부의 함수들은 리렌더링 시 마다 새로 선언 된다 이자체는 많은 리소스를 차지하는 것은 아니지만 이 함수들을 기억해서 재사용 하는 것은 중요하다.

왜냐하면 우리는 함수를 props 로 넘겨주는 일을 하는 경우가 많은데 이때 우리는 나중에 props 가 변경되지 않으면 virtual dom 에서 새롭게 렌더링 하지 않도록 최적화 작업을 해줄수가 있게 된다 그런데 매번 함수가 변경되고 그함수를 props 로 넘겨주게 되면 매번 리렌더링 이 되기 때문에 최적화 작업에서 props 로 넘겨주는 함수는 useCallback 을 이용해 함수를 재사용 해주는 것이 필수이다.

 

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>
  );
}

 

 

 

참고:velog.io/@yu_yu/useMemo-useCallback-React.memo-gu4rsta9

useMemo, useCallback, React.memo