TDD - Green, Red, Refactor

아아 그렇군요
리액트가 컴포넌트 실행할때마다 함수를 새로 만드는데, 만약에 함수가 useCallback으로 감싸져있고 종속성 배열에 있는 것들이 바뀌지 않았으면 새로 만들지 않는거네요.

답변 감사합니다!

대부분의 경우 useCallback 을 사용하기 보다는 사용하지 않는 편이 좋습니다. 리액트 앱이 제대로 퍼포먼스를 내지 못하는 경우에만 사용한다라고 생각하시면 좋겠네요. 우선 장점은 제대로 이해한 것 같으셔서 넘어가고 단점을 말씀드리면 useCallback 으로 함수를 감싸고 있으면 그것은 메모리에 저장됩니다. 그렇기 때문에 새롭게 렌더링 될 때마다 함수를 매번 만드는게 아니라 메모리에서 꺼내서 사용하게 되기 때문에 useCallback을 남용하면 메모리를 잡아먹습니다. 그런데 대부분의 경우에 useCallback 을 사용했을 때 얻는 퍼포먼스 관점에서의 이점이 없습니다. 그래서 제가 앞서 말한대로 정말 리액트 앱이 느려질 때만 사용하라고 말씀드린 것입니다.

사용해야 하는 극단적인 예를 하나 보여드리면,

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

const ExpensiveItem = React.memo(({ count, increment }) => {
  // ... costly computations / render
  return (
    <div>
      Count: {count}
      <button onClick={increment}>Increase Count</button>
    </div>
  );
});

const App = () => {
  const [counts, setCounts] = useState(new Array(10000).fill(0)); // 10000 items

  const increment = useCallback((index) => {
    setCounts((counts) => {
      const newCounts = [...counts];
      newCounts[index]++;
      return newCounts;
    });
  }, []);

  return (
    <div>
      {counts.map((count, index) => (
        <ExpensiveItem key={index} count={count} increment={() => increment(index)} />
      ))}
    </div>
  );
};

export default App;

increment 함수에 useCallback을 씌우지 않으면 App이 렌더링 될 때마다 ExpensiveItem 는 increment가 새로운 주소를 할당받은 함수이니까 이 컴포넌트도 재렌더링을 하게 됩니다. 하지만 useCallback을 씌우게 되면 항상 고정된 주소의 함수가 넘어오니까 재렌더링이 발생하지 않게 됩니다.

useCallback을 항상 써야 하냐는 해외 커뮤니티에서도 조금 논란의 소지가 있는데 이 밑에 링크 들어가셔서 댓글 보면 좋을 것 같습니다.

https://www.reddit.com/r/reactjs/comments/11gssqx/do_we_really_need_to_wrap_every_function_in/