useCallback

지난번에 포스팅했던 useMemo이 값의 재사용을 위한 것이라면 useCallback은 함수의 재사용을 위한 Hook 함수이다.

지난번에 사용했던 회원가입 App 컴포넌트를 가져왔다.

import React, { useState } from 'react';
 
function countUsers (users) {
  console.log("회원 수를 세는 중...");
  return users.length;
}
 
function App() {
  const [users, setUsers] = useState([]);
 
  const [inputs, setInputs] = useState({
    username: '',
    email: ''
  });
 
  const { username, email } = inputs;
  const onCreate = () => {
    setUsers([
      ...users,
      {
        username: username,
        email: email
      }
    ]);
  }
 
  const onChange = e => {
    const { name, value } = e.target;
    setInputs({
      ...inputs,
      [name]: value
    });
  }
 
  const count = countUsers(users);
 
  return (
    <div>
      <input name='username' onChange={onChange} value={username} placeholder='이름'></input>
      <input name='email' onChange={onChange} value={email} placeholder='이메일'></input>
      <button onClick={onCreate}>등록</button>
      <div>
        {
          users.map(user => <div>{user.username} ({user.email})</div>)
        }
      </div>
      <div>전체 회원 수: {count}</div>
    </div>
  )
}
export default App;

 

여기서 onCreate, onChange 함수는 컴포넌트가 리렌더링될 때마다 새로 만들어진다.

39, 40번째줄에 있는 username과 email을 입력하는 input은 키를 하나 입력할 때마다 App이 리렌더링되는데,

그 때마다 App 컴포넌트의 내부 함수인 onCreate와 onChange 함수가 계속 새로 만들어지는 것이다.

이들을 새로 만들지 않고 재사용하기 위해서 useCallback 함수를 사용할 수 있다.

사용법 역시 useMemo와 비슷하다.

 

useCallback(함수, [함수를 새로 만들지 말지 결정할 변수들])

17번째줄에 있는 onCreate 함수에 적용해보면 다음과 같다.

  const onCreate = useCallback(() => {
    setUsers([
      ...users,
      {
        username: username,
        email: email
      }
    ]);
  }, [users, username, email]);

 

onCreate 함수 내에서 사용하고 있는 '상태'들은 users, username, email이다.

만약 이 값들이 변했는데도 성능을 최적화하겠다고 두번째 파라미터에 이 상태들을 넣지 않으면 onCreate 함수가 실행될 때 현재 users가 아닌 초기값을 사용하는 등 예상치 못한 결과를 낳을 수 있다.

이런 일을 방지하기 위해 useCallback의 두번째 파라미터에는 '이 상태들이 변하면 함수를 새로 만들어주세요'하고 dependencies들을 넣어주어야 한다.