[React] useCallback을 왜 제거할까?

문제 발생 

- 사용자를 초대한 상태인데 똑같은 사용자를 초대했을 때 어떤 식으로 작동할까라는 예외사항을 만들어보았다. 역시나, 초대된 사용자를 X버튼을 눌러서 초대를 취소했을 때, 똑같은 사용자가 표시 된다.

 

- 또, 닉네임을 입력하게 되면 입력된 만큼 query에 cache되는 모습을 확인 할 수 있다.

 

해결 방법

- 초대 버튼을 누르면 무조건 refetch()가 되기 떄문에, 초대자에 해당 닉네임이 없을 때만 refetch()가 될 수 있게 조건 문을 설정하였다. 맨 처음에는 useCallback으로 감싸져 있어서, contributors, inputValue를 업데이트가 안되어서 계속 오류가 났었는데, useCallback을 감싼 로직을 삭제했다.

 

- 그런데, useCallback을 사용해도 contributors, inputValue는 업데이트가 되어야한다. 살펴보니, useCallback 안에 의존성 배열을 제대로 지정을 안해서 생겨난 문제였다. 

const handleClickSearch = () => {
    if (contributors.filter((l) => l.nickname === inputValue).length === 0) {
      refetch();
    }
  };

 

- 입력된 만큼 query에 chache되는 것을 방지하고자, useDebounced 훅을 제작하여서, 3초 뒤에 마지막에 입력한 값만 cache되게 설정하였다.

import { useEffect, useState } from 'react';

export const useDebounce = (value: string, delay: number) => {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);
    return () => clearTimeout(timer);
  }, [value]);

  return debouncedValue;
};


const nickname = useDebounce(inputValue, 300);
  const { data: userData, refetch } = useGetUser({
    q: nickname,
  });

 

여기서 잠깐!! 왜 useCallback을 제거해야할까?

사실 나는 useCallback을 사용하는 것을 좋아하지 않는다. useCallback의 경우 많은 계산을 해야할 경우 유용하게 사용할 수 있으나, 지금 내가 만들고 있는 프로젝트의 경우에는 많은 계산이 들어가지 않는다. 그래서 사용을 안하는데 이 부분은 다른 팀원이 제작했던 부분이어서 지금 현재 혼자서 개선을 해나가는 중이기 때문에 내가 이 부분을 개선해야했다. 

 

왜 제거하는 것을 선호하는지를 설명하기 위해서 useCallback에 대해서 자세히 알아보자. useCallback은 간단하게 말하면 리렌더링 사이에 함수 정의를 캐시할 수 있게 해주는 React 훅입니다. 함수를 초기에 불러오고, 의존성 배열의 값이 바뀌지 않았다면 리렌더링이 일어나도 새로운 함수를 불러오는게 아닌 초기 함수를 반환합니다. 즉, 성능 최적화하기에는 좋습니다.

 

하지만 코드 가독성이 떨어지게 되고, 만약, 항상 새로운 단일 값인 경우 전체 컴포넌트에 대한 메모화가 깨질 수 있으며, 무분별하게 사용하게 되면 캐시하는 것이기 때문에 그만큼 메모리를 사용하게 됩니다. 

 

그리고 성능을 최적화하기 위해서 사용하기에는 그림 편집기 처럼 인터랙션이 많이 일어나는 게 아니라면, 그렇게 큰 효과는 없습니다. 

결국, 지금 프로젝트에서는 이런 인터랙션이 많이 일어나는게 아니기때문에 useCallback은 필요가 없습니다.

 

자세한 내용은 아래 링크에 정리해놓았습니다.

[React] useCallback은 무엇일까?

 

완성 화면