[react/typescript] react 컴포넌트 함수를 선언하고, export하지?

React 컴포넌트를 TypeScript로 작성할 때, 컴포넌트의 props에 대한 타입을 정의할 수 있습니다. 만약 props가 필요 없는 간단한 컴포넌트라면, 다음과 같이 작성할 수 있습니다:

import React from 'react';

const Example: React.FC = () => {
  return (
    <div>
      {/* 컴포넌트 내용 */}
    </div>
  );
};

export default Example;

여기서 React.FC는 React.FunctionComponent의 줄임말로, 이 타입은 함수 컴포넌트가 반환할 수 있는 값(일반적으로 JSX 또는 null)과 이 컴포넌트가 받을 수 있는 props의 타입을 정의합니다.

만약 이 컴포넌트가 특정 props를 받아야 한다면, 이를 명시적으로 정의할 수 있습니다. 예를 들어, 다음과 같이 props의 타입을 정의할 수 있습니다:

import React from 'react';

// Props 타입 정의
interface ExampleProps {
  message: string;
  count: number;
}

const Example: React.FC<ExampleProps> = ({ message, count }) => {
  return (
    <div>
      <p>{message}</p>
      <p>{count}</p>
      {/* 기타 컴포넌트 내용 */}
    </div>
  );
};

export default Example;

이렇게 TypeScript를 사용하면 컴포넌트의 props에 대한 타입 안정성을 보장할 수 있으며, 개발 과정에서 타입 체크를 통해 오류를 사전에 방지할 수 있습니다.

default export하는 몇 가지 예를 추가합니다.
함수 선언을 하고 나서 exprot하는 경우와 함수 선언과 동시에 export default를 사용하는 경우로 구분할 수 있습니다.

import React from 'react';

const Example: React.FC = () => {
  return (
    <div>
      {/* 컴포넌트 내용 */}
    </div>
  );
};

export default Example;

또는 함수 선언과 동시에 export default를 사용하는 경우, 다음과 같이 작성할 수 있습니다:

import React from 'react';

export default function Example(): React.ReactElement {
  return (
    <div>
      {/* 컴포넌트 내용 */}
    </div>
  );
}

또는 화살표 함수를 사용하는 경우:

import React from 'react';

export default (): React.ReactElement => {
  return (
    <div>
      {/* 컴포넌트 내용 */}
    </div>
  );
};

이러한 방식으로 함수 선언과 함께 바로 내보내기를 수행할 수 있습니다. 함수를 선언하는 동시에 내보내기를 원할 경우 위의 방법 중 하나를 사용하시면 됩니다.