JSX에서 상위 컴포넌트로부터 속성(props)을 받아오는 것은 React 애플리케이션에서 매우 일반적입니다. 이를 통해 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 수 있습니다. TypeScript와 JSX를 함께 사용할 때도 속성을 받아오는 방법은 동일합니다.

속성(props)의 타입 정의하기

먼저, TypeScript에서 JSX로 작성된 컴포넌트에서 속성(props)을 받아오기 전에 해당 속성의 타입을 정의해야 합니다. 이를 위해 다음과 같이 인터페이스(Interface)를 사용하여 속성의 타입을 정의할 수 있습니다.

interface MyComponentProps {
  name: string;
  age: number;
}

위의 예제에서 MyComponentProps 인터페이스는 name이라는 문자열 형식의 속성과 age라는 숫자 형식의 속성을 가지고 있음을 정의하고 있습니다.

속성(props) 받아오기

JSX에서 상위 컴포넌트로부터 속성을 받아오기 위해서는 간단하게 해당 컴포넌트의 함수 매개변수로 속성을 전달하면 됩니다.

import React from 'react';

const MyComponent: React.FC<MyComponentProps> = (props) => {
  return <div>{`이름: ${props.name}, 나이: ${props.age}`}</div>;
}

위의 예제에서 MyComponent는 MyComponentProps 인터페이스를 이용하여 속성을 받아오고 있습니다.

JSX에서 상위 컴포넌트로부터 속성 전달하기

마지막으로, 상위 컴포넌트에서 JSX를 사용하여 하위 컴포넌트로 속성을 전달하는 방법은 다음과 같습니다.

import React from 'react';
import MyComponent from './MyComponent';

const App: React.FC = () => {
  return <MyComponent name="홍길동" age={30} />;
}

위의 예제에서 App 컴포넌트는 MyComponent에 name과 age 속성을 전달하여 데이터를 함께 전달하고 있습니다.

이를 통해 JSX에서 상위 컴포넌트로부터 속성을 받아오고, 상위 컴포넌트에서 하위 컴포넌트로 속성을 전달하는 방법에 대해 살펴보았습니다.

참조 링크: React Documentation, TypeScript Handbook