[React/Typescript] interface와 함수형 컴포넌트

devJisun·2024년 12월 17일

interface는 TypeScript에서 사용되는 기능으로, 객체의 구조를 정의하는 데 사용된다. interface를 사용하면 객체가 특정 속성과 메서드를 가져야 한다는 것을 명시할 수 있다. 이는 코드의 가독성을 높이고, 타입 검사를 통해 오류를 사전에 방지하는 데 도움이 된다.

✏️ interface의 주요 기능

객체의 구조 정의: 객체가 가져야 할 속성과 그 타입을 정의
타입 안전성 제공: 객체가 정의된 구조를 따르는지 컴파일 타임에 검사
코드 가독성 향상: 객체의 구조를 명확하게 정의하여 코드의 가독성을 높임
선택적 속성: ?를 사용하여 선택적 속성을 정의할 수 있음

🍒 interface 사용 예시

interface CountdownTimerProps {
  duration: number; // 타이머 총 시간(초 단위)
  onTimeout?: () => void; // 시간이 만료되었을 때 실행할 콜백 함수
}

CountdownTimerProps 인터페이스는 CountdownTimer 컴포넌트가 받아야 할 속성을 정의함.
"duration이라는 숫자 속성과 선택적으로 onTimeout이라는 함수 속성을 가질 것."

이렇게 하면 컴포넌트를 사용할 때 올바른 속성을 전달하도록 강제할 수 있다.

🍒 함수형 컴포넌트 정의 예시

const CountdownTimer: React.FC<CountdownTimerProps> = ({ duration, onTimeout }) => {
  // 타이머 로직 구현
  // 시간이 만료되었을 때 onTimeout 호출
};

CountdownTimer 컴포넌트를 사용할 때 duration 속성을 반드시 제공해야 하며, onTimeout 속성은 선택적으로 제공할 수 있다. TypeScript는 컴파일 타임에 이 구조를 검사하여 타입 안전성을 보장한다.

잠깐, 함수를 정의 할때 쓰이는 React.FC 이런 형태는 도대체 무엇일까?

✏️ TypeScript에서 함수형 컴포넌트를 정의하고 타입을 지정하는 방법

React.FC (또는 React.FunctionComponent) 타입을 사용하여 함수형 컴포넌트의 타입을 지정 할수 있다. 이 타입은 컴포넌트의 props를 정의하는 인터페이스와 함께 사용된다.

TypeScript에서 함수형 컴포넌트를 위한 타입에는 여러 가지가 있고 가장 일반적으로 사용되는 타입은 React.FC (또는 React.FunctionComponent)인데 먼저 React.FC에 대해 설명한 뒤 다른 타입도 살펴보도록 하자.

1. 인터페이스 정의

먼저, 컴포넌트가 받을 props의 타입을 정의하는 인터페이스를 만든다. 예를 들어, CountdownTimer 컴포넌트의 props는 duration과 선택적인 onTimeout 함수이다.

interface CountdownTimerProps {
  duration: number; // 타이머 총 시간(초 단위)
  onTimeout?: () => void; // 시간이 만료되었을 때 실행할 콜백 함수
}

2. 함수형 컴포넌트 정의

그 다음, React.FC 타입을 사용하여 함수형 컴포넌트를 정의하고, props의 타입을 지정한다.

import React from 'react';

const CountdownTimer: React.FC<CountdownTimerProps> = ({ duration, onTimeout }) => {
  // 타이머 로직 구현
  // 시간이 만료되었을 때 onTimeout 호출

  return (
    <div>
      {/* 타이머 UI */}
    </div>
  );
};

export default CountdownTimer;

React.FC< CountdownTimerProps >: React.FC는 함수형 컴포넌트를 위한 타입이다. < CountdownTimerProps >는 이 컴포넌트가 받을 props의 타입을 지정한다.
({ duration, onTimeout }): 함수형 컴포넌트의 매개변수로 props를 구조 분해 할당한다.
export default CountdownTimer;: 컴포넌트를 모듈의 기본 내보내기로 설정한다.

✏️ 함수형 컴포넌트를 위한 타입 알아보기

1. React.FC (또는 React.FunctionComponent)

React.FC는 함수형 컴포넌트를 정의할 때 가장 일반적으로 사용되는 타입. 이 타입은 기본적으로 props의 타입을 지정하고, children 속성을 포함한다.

import React from 'react';

interface MyComponentProps {
  title: string;
}

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

2. React.VFC (또는 React.VoidFunctionComponent)

React.VFC는 React.FC와 유사하지만, children 속성을 포함하지 않는다. children을 사용하지 않는 컴포넌트에 적합하다.

import React from 'react';

interface MyComponentProps {
  title: string;
}

const MyComponent: React.VFC<MyComponentProps> = ({ title }) => {
  return (
    <div>
      <h1>{title}</h1>
    </div>
  );
};

3. 직접 함수 타입 지정

React.FC나 React.VFC를 사용하지 않고, 직접 함수 타입을 지정할 수도 있다. 이 방법은 더 명확하게 props를 정의할 수 있으며, children 속성을 포함하지 않는다.

import React from 'react';

interface MyComponentProps {
  title: string;
}

const MyComponent = ({ title }: MyComponentProps): JSX.Element => {
  return (
    <div>
      <h1>{title}</h1>
    </div>
  );
};

4. 제네릭 타입을 사용하는 경우

제네릭 타입을 사용하는 경우, 제네릭 타입 매개변수를 포함한 함수형 컴포넌트를 정의할 수 있다.

import React from 'react';

interface MyComponentProps<T> {
  items: T[];
}

const MyComponent = <T,>({ items }: MyComponentProps<T>): JSX.Element => {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
};