React Hooks : useCallback() 함수 *컴포넌트 성능 최적화

 

useCallback 은 useMemo를 기반으로 만들어져서 두 개는 비슷한 점을 가진 Hooks 이다.

useMemo는 특정 결과값을 재사용 할 때 쓰고, useCallback은 특정 함수를 재사용 할 때 사용한다.

 

useCallback를 사용할 때 함수 안에서 사용하는 state, props가 있다면,

반드시 deps 배열 안에 포함시켜야한다.

그리고 컴포넌트에서 prosp로 함수를 받아왔다면 그 함수도 deps에 포함시켜야한다.

 

함수를 자식컴포넌트에 props로 넘겨줄 때는 항상 useCallback을 사용해야한다.

그렇지 않으면 자식컴포넌트는 계속 새로운 함수를 생성한다고 받아들이기 때문에 렌더링이 계속 실행된다.

 

useCallback을 사용하지 않은 함수들은 컴포넌트가 리렌더링 될 때 마다 새로 만들어진다.

함수가 새로 만들어지는 것이 성능을 떨어뜨리지는 않지만,

컴포넌트 결과물을 재사용하거나 하는 최적화 작업을 할 때 함수을 재사용하는 것이 필요하다.

 

 

useCallback 사용법

 

기본 형태 :

useCallback( function, deps )

 

- function : 재사용 할 함수

- deps : 검사할 특정 값을 담은 배열

(배열 안의 값이 바뀌면 함수를 호출해서 연산하고, 값이 바뀌지 않으면 이전에 연산한 값을 재사용한다.

 함수 안에서 state나 props가 바뀌면 함수를 호출해서 실행한다.)

 

import React, { useState, useCallback } from 'react';

//코드 생략

  const onCreate = useCallback(() => {
    const user = {
      id: nextId.current,
      username,
      email
    };
    setUsers(users.concat(user));

    setInputs({
      username: '',
      email: ''
    });
    nextId.current += 1;
  }, [users, username, email]);
  
//코드 생략

 

import React, { useState, useCallback } from 'react';

 

: useCallback 함수를 불러온다.

 

 

}, [users, username, email]);

 

: useCallback 에서 사용하는 state, props를 배열에 넣는다.