[React] interface를 여러개 정의할경우

인터페이스를 여러 개로 나누어 관리하면 코드의 가독성을 높일 수 있습니다.

각 인터페이스는 해당 컴포넌트에서 수행하는 한 가지 주제나 목적에 대한 props를 관리하도록 할 수 있습니다.

import React, { FC } from 'react';

// 사용자 정보를 위한 인터페이스
interface UserInfoProps {
  name: string;
  age: number;
}

// 관리자 권한 정보를 위한 인터페이스
interface AdminProps {
  isAdmin: boolean;
  adminCode: string;
}

// 위 두 인터페이스를 합친 인터페이스
interface MyComponentProps extends UserInfoProps, AdminProps {}

const MyComponent: FC<MyComponentProps> = ({ name, age, isAdmin, adminCode }) => (
  <div>
    My name is {name} and I am {age} years old.
    {isAdmin && <div>I have admin code: {adminCode}</div>}
  </div>
);