16. useCallback 이용하여 함수 재사용하기

# useCallback은 useMemo 와 비슷한 Hook 인데

useMemo는 특정 결과 값을 재사용, useCallback은 특정 함수를 새로 만들지 않고 재사용하는데에 사용된다.

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

  setInputs({
    username: '',
    email: ''
  });
  nextId.current += 1;
};

const onRemove = id => {
  // user.id 가 파라미터로 일치하지 않는 원소만 추출해서 새로운 배열을 만듬
  // = user.id 가 id 인 것을 제거함
  setUsers(users.filter(user => user.id !== id));
};
const onToggle = id => {
  setUsers(
    users.map(user =>
      user.id === id ? { ...user, active: !user.active } : user
    )
  );
};

위 onCreate, onRemove, onToggle 함수들은 컴포넌트가 리렌더링 될 때마다 새로 만들어진다.

​

함수를 선언하는 것 자체는 메모리/CPU 측면에서 리소스를 많이 차지하는 작업은 아니기 때문에

함수를 새로 선언한다고 해서 그 자체만으로 큰 부하가 걸릴 일은 없지만, 한 번 만든 함수를 필요할 때에만 새로 만들고 재사용하는 것은 중요하다.

const onChange = useCallback(
    e => {
      const { name, value } = e.target;
      setInputs({
        ...inputs,
        [name]: value
      });
    },
    [inputs]
  ); 
...
 const onCreate = useCallback(() => {
    const user = {
      id: nextId.current,
      username,
      email
    };
    setUsers(users.concat(user));

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

  const onRemove = useCallback(
    id => {
      // user.id 가 파라미터로 일치하지 않는 원소만 추출해서 새로운 배열을 만듬
      // = user.id 가 id 인 것을 제거함
      setUsers(users.filter(user => user.id !== id));
    },
    [users]
  );
  const onToggle = useCallback(
    id => {
      setUsers(
        users.map(user =>
          user.id === id ? { ...user, active: !user.active } : user
        )
      );
    },
    [users]
  );

(주의) 함수 안에서 사용하는 상태 혹은 props 혹은 props 로 받아온 함수가 있다면 반드시 deps 배열 안에 포함해야 한다.

만약 함수에서 상태나 props 를 사용하고 있음에도 deps 배열에 넣지 않는다면 함수 내에서 해당 값들을 참조할 때

가장 최신의 값을 참조한다고 보장을 못하기 때문이다.

​

사실상 useCallback 은 useMemo를 기반으로 만들어졌기 때문에 아래와 같이 표현할 수도 있다.

const onToggle = useMemo(
  () => () => {
    ...
  }, [users]
);

 

React DevTools

React DevTools 는 Chrome 확장 플러그인인떼 어떤 컴포넌트가 렌덛링되고 있는지 확인할 수 있다. (개발자 도구 - React 탭)

톱니바퀴 아이콘 > Highlight Updates를 체크해주면 리렌더링되는 컴포넌트에 사각형 형태로 하이라이트되어 보여진다.

---

출처 : https://react.vlpt.us/basic/18-useCallback.html

18. useCallback 를 사용하여 함수 재사용하기 · GitBook