[React] React.memo(), useMemo(), useCallback()

React관련 과제를 수행하면서

 

화면 랜더링을 최적화하는 역할을 수행해야 했고,

관련 지식이 전혀 없어 구글링을 수행했습니다.

 

그 결과 React.memo(), useMemo(), useCallback()이라는 세 가지 메서드를 경험하게 되었고,

이후 활용 가능성이 높은 메서드들이라 생각해 세 가지에 대해서 공부한 내용을 정리해보려고 합니다.

 

React.memo()

React.memo() 컴포넌트의 Re-rendering을 방지하는 메서드입니다.

기본적인 동작은 컴포넌트가 전달받는 props가 바뀌지 않았다면 리 랜더링이 일어나지 않도록하여 컴포넌트 리랜더링 성능 최적화를 해줄 수 있는 함수입니다.

 

사용 예)

import React from "react";

function Card({ cardContent }) {
	//content
}

export default React.memo(Card)

사용 방법은 함수형 컴포넌트로 선언해줄 경우 export 해줄 때 React.memo로 컴포넌트를 감싸주기만 하면 됩니다.

 

useMemo()

useMemo()라는 react Hook은 연산된 값을 기억하고 있어 같은 데이터에 대해서 다시 연산을 해야 할 때 연산 값을 그대로 사용하여 불필요한 함수 호출을 줄이고 자원 낭비를 막을 수 있도록 해줍니다.

import React, { useState, useMemo } from "react";

function getLength(users) {
	return users.length;
}

function App() {
	const [user, setUser] = useState(['a', 'b', 'c']);
	
	const count = useMemo(() => getLength(user), [user]);
	return (
    	<div>{ count }</div>
    )
}

export default App;

useMemo 내에 첫 번째 인자로 연산을 수행할 메서드를 선언해주고, 두번째 인지로 deps 배열을 넘겨줍니다.

이때 배열 내의 값이 바뀌면 내부 메소드를 수행하여 새로운 결괏값을 계산하고, 만약 내용이 바뀌지 않았다면 이전에 연산한 값을 재사용하게 됩니다.

 

useCallback()

useCallbakc()은 useMemo와 달리 함수를  메모지 에이션(Memoziation) 하고 있어, 컴포넌트가 재 랜더링 되어도 해당 인자의 값이 바뀌지 않으면 이전에 호출한 함수를 그대로 사용하는 react hook입니다.

import React, { useCallback } from "react";

function App() {
	const addValue = useCallback(() => x + y, [x, y]);
    ...
}

export default App;

위 내용과 같은 코드가 있다고 할 때,

해당 컴포넌트가 재 랜더링 되어도 addValue 함수의 x, y가 바뀌지 않았다면 이전에 사용한 함수를 재사용하여 addValue에 할당합니다. 그리고 x, y의 값이 변경된다면 새로운 함수가 생성되어 변수에 할당됩니다.

 

 

따라서 마지막으로 정리해보면

React.memo()는 컴포넌트를 기억하고

useMemo()는 계산 결괏값을 기억하고

useCallback()은 계산에 사용되는 함수 자체를 기억합니다.

 

# Reference

19. React.memo 를 사용한 컴포넌트 리렌더링 방지 · GitBook

17. useMemo 를 사용하여 연산한 값 재사용하기 · GitBook

React Hooks: useCallback 사용법