useCallback 으로 함수형 컴포넌트를 선언하고 사용해도 괜찮을까요 ?

봇이 답변한 것처럼 컴포넌트를 분리하는 것이 일반적인 패턴이며 useCallback에 감싸진 함수를 deps에 따라서 렌더링할 것인 안할 것인지에 대한 연산도 추가적으로 들어가기 때문에 어플리케이션이 커진다면 그것도 일종의 비용이 될 것이며 props변환에 따른 컴포넌트의 리렌더링 최적화를 원하다면 memo를 사용하시면 됩니다. https://react.dev/reference/react/memo

함수 컴포넌트 내에서 useCallback으로 감싸진 함수에서 컴포넌트를 반환하는 것은 일반적인 패턴은 아닙니다. 이렇게 작성하면 Hi 컴포넌트를 렌더링할 때마다 새로운 함수 인스턴스가 생성됩니다. 이렇게 하면 불필요한 리렌더링이 발생할 수 있습니다. 이 문제를 해결하기 위해, Hi 컴포넌트를 별도의 함수 컴포넌트로 분리하는 것이 좋습니다. 다음과 같이 작성해보세요: 이렇게 작성하면 Hi 컴포넌트를 별도의 함수 컴포넌트로 분리하여 성능을 최적화하고, 코드의 가독성을 높일 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
function Hi() {
  return <div>hi</div>;
}

function A() {
  return (
    <>
      <Hi />
      <div>hello</div>
    </>
  );
}