본문 바로가기

프론트엔드(Front-End)/TypeScript

[TypeScript] 리액트와 타입스크립트(간단)

리액트 컴포넌트를 타입스크립트와 함께 사용하기

타입스크립트는 React.js, Next.js와 같은 여러 프레임워크와 함께 사용할 수 있습니다.

리액트의 컴포넌트 역시 타입스크립트의 타입으로 표현 및 지정될 수 있으며, 아래와 같이 사용할 수 있습니다.

 

type MyProps = {
  name: string;
};

function App(props: MyProps): JSX.Element {
  return <div>{message}</div>;
}

 

실제 프로젝트에서 사용하는 전체 코드는 다음과 같이 사용 가능합니다.