[typescript] JSX에서 컴포넌트에 props 전달하는 방법

18 Dec 2023

typescript

JSX는 React 애플리케이션에서 컴포넌트를 작성하는 데 사용되는 JavaScript의 확장이며, 이를 통해 컴포넌트에 데이터를 전달할 수 있습니다. 이 포스트에서는 TypeScript에서 JSX를 사용하여 컴포넌트에 props를 전달하는 방법에 대해 알아보겠습니다.

인터페이스를 사용하여 props 정의

먼저, 컴포넌트에 전달될 props의 타입을 정의하는 것이 중요합니다. TypeScript에서는 이를 위해 인터페이스를 사용할 수 있습니다. 예를 들어, 다음과 같이 Props 인터페이스를 정의할 수 있습니다.

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

컴포넌트에 props 전달하기

props를 전달하려는 컴포넌트를 작성할 때는 JSX를 사용하여 해당 컴포넌트에 props를 전달할 수 있습니다.

import React from 'react';

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

const MyComponent: React.FC<Props> = (props) => {
  return (
    <div>
      <p>Name: {props.name}</p>
      <p>Age: {props.age}</p>
    </div>
  );
}

export default MyComponent;

위 예제에서 MyComponent는 Props 인터페이스를 사용하여 name과 age라는 두 가지 props를 받도록 정의되었습니다.

컴포넌트 사용 시 props 전달하기

컴포넌트를 실제로 사용할 때는 해당 컴포넌트에 props를 전달하여야 합니다.

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

const App: React.FC = () => {
  return (
    <div>
      <MyComponent name="John Doe" age={30} />
    </div>
  );
}

export default App;

위 예제에서 MyComponent를 사용할 때 name과 age를 포함한 props를 전달하고 있습니다.

결론

TypeScript를 사용하여 JSX에서 컴포넌트에 props를 전달하는 방법에 대해 살펴보았습니다. 인터페이스를 사용하여 props의 타입을 정의하고, JSX를 통해 컴포넌트에서 해당 props를 활용하는 것이 중요합니다. 이를 통해 타입 안정성을 확보하고 코드의 가독성을 유지할 수 있습니다.

참고 문헌:

React - TypeScript로 작성하기

이제 JSX에서 컴포넌트에 props를 전달하는 방법에 대해 더 나은 이해를 가지셨으면 좋겠습니다. 만약 추가 질문이 있거나 더 궁금하신 사항이 있다면 언제든지 문의해주세요!