: React.FC<TypeProps> = ()

// 예시
import React from 'react';

interface TodoListProps {
  todos: string[];
  title?: string;
}

const TodoList = ({todos}:{todos: string[], title?: string;}) => {
  return (
    <div>
      <h1>{title}</h1>
      <ul>
        <li key={index}>{todo}</li>
      </ul>
	</div>
  );
};

export default TodoList;

1. React.FC를 사용한 경우

const TodoList: React.FC<TodoListProps> = ({ todos }) => {...
// TodoListProps의 속성들이 모두 선택적인 속성으로 간주된 상태.

• React.FC
  - props가 선택적인 경우를 대비하여 만들어진 것.
  - 기본적으로 children을 포함한 모든 속성들이 선택 속성으로 간주됨.
  → 해당 컴포넌트에서 children을 사용할 때 유용
  - 필수 속성은 명시적으로 지정해야 하는 불편함이 있음.
  - prop의 순서를 바꾸기 어려울 수 있음.

2. 객체 비구조화를 통한 타입 지정

const TodoList: React.FC<TodoListProps> = ({ todos }) => {...

• 모든 속성이 필수적인 것으로 간주
• 선택 속성은 ?를 추가해서 명시적으로 지정해야함.
• 프로퍼티의 순서에 상관없이 prop을 선언할 수 있어 더 자유롭게 사용