리액트 컴포넌트

컴포넌트

재사용 가능한 UI 형태

컴포넌트 만드는 두 가지 방법

방법 1: 함수로 만들기

export function MyComponent({ title }: Props) {
  return <div>{title}</div>
}

방법 2: 변수로 만들기 (현재 코드 방식)

// React.FC = React.FunctionComponent의 줄임말
const MyComponent: React.FC<Props> = ({ title }) => {
  return <div>{title}</div>
}

차이점

언제 사용할 수 있나?
// 방법 1: 어디서든 사용 가능 (위에 써도 됨)

<MyComponent />
export function MyComponent() { ... }

// 방법 2: 선언 후에만 사용 가능

const MyComponent = () => { ... }
<MyComponent /> // 이제 사용 가능

타입 지정
// 방법 1: 직접 타입 써야 함

export function MyComponent({ title }: { title: string }) { ... }

// 방법 2: React.FC가 자동으로 도움

const MyComponent: React.FC<{ title: string }> = ({ title }) => { ... }