tsx 파일에는 Server 든 client 든 FC 를 붙여야해 ?

🤔 tsx 파일에는 Server 든 client 든 FC 를 붙여야해 ? 

🧐 장단점

 

TSX 파일에서 컴포넌트를 정의할 때 FC (Functional Component) 타입을 사용하는 것은 선택 사항입니다. 이는 개발자의 선호도와 팀의 코드 스타일 가이드에 따라 달라질 수 있습니다. FC 타입을 사용하면 컴포넌트의 Props 타입을 명시하고, 기본적으로 children prop을 포함하는 등의 이점이 있습니다.

 

장점
FC 타입은 children을 기본적으로 포함하기 때문에 추가적인 타입 정의가 필요 없습니다.
컴포넌트의 Props 타입을 명확하게 정의할 수 있습니다.

단점
FC 타입은 기본적으로 children을 포함하기 때문에, children을 사용하지 않는 컴포넌트에서도 children prop이 필요할 것으로 보일 수 있습니다.
일부 경우에는 불필요하게 복잡해 보일 수 있습니다.

결론
모든 컴포넌트에 FC 타입을 사용해야 하는 것은 아니며, 필요에 따라 사용할 수 있습니다. 팀의 코드 스타일 가이드나 개인의 선호도에 따라 결정하면 됩니다. 만약 FC 타입을 사용하는 것이 코드의 일관성을 유지하고 타입 정의를 더 명확하게 한다면 사용하는 것이 좋습니다. 그렇지 않다면 굳이 사용할 필요는 없습니다.

😆  FC 타입을 사용하는 경우

 

FC 타입을 사용하면 타입스크립트의 이점을 더 잘 활용할 수 있습니다. 특히, Props의 타입을 명시적으로 지정하고 children을 자동으로 포함시킬 수 있습니다.

 

import React, { FC } from 'react';

interface MyComponentProps {
  title: string;
}

const MyComponent: FC<MyComponentProps> = ({ title, children }) => {
  return (
    <div>
      <h1>{title}</h1>
      {children}
    </div>
  );
};

export default MyComponent;

 

import React from 'react';

interface MyComponentProps {
  title: string;
  children?: React.ReactNode;
}

const MyComponent = ({ title, children }: MyComponentProps) => {
  return (
    <div>
      <h1>{title}</h1>
      {children}
    </div>
  );
};

export default MyComponent;