React - useCallback

목록

• Introduction
• useCallback
• Conclusion

📌 Introduction

안녕하세요. 오늘은 react에서 useCallback을 사용해서 새로운 함수를 선언을 하기보다 재사용하는 방법에 대해서 알려드리려고 합니다.

📌 useCallback

만약 이런 함수가 컴포넌트 내부에 있다고 가정을 해볼게요.

  const onToggle = (userId) => {
    setUsers(
      users.map((user) =>
        user.id === userId ? { ...user, active: !user.active } : user
      )
    );
  };

그렇다면 위에 있는 onToggle은 컴포넌트가 랜더링이 될때마다 다시 선언을 해주게 될거 예요. 하지만 앞선 포스팅에 useMemo와 같이 이렇게 해줄수 있습니다.

  const onToggle = useCallback(
    (userId) => {
      setUsers(
        users.map((user) =>
          user.id === userId ? { ...user, active: !user.active } : user
        )
      );
    },
    [users]
  );

useMemo때와 동일하게 이제 onToggle은 users가 변화할때만 선언을 하게 됩니다. 그렇지 않다면 재사용하게 될거 예요.

📌 Conclusion

이렇게 useCallback에 대해서 알아보았습니다. 실제로 이렇게 해도 큰 변화는 없을거예요. 하지만 이제 다음에 나올 React.memo를 아신다면 좀더 성능에 최적화할 수 있게 됩니다. 그럼 다음 포스팅에서 만나요 안녕!