[typescript] 타입스크립트로 리액트 클래스형 컴포넌트 작성 방법

18 Dec 2023

typescript

리액트 애플리케이션을 개발할 때 타입스크립트를 사용하면 코드를 더 안정적으로 유지할 수 있습니다. 타입스크립트를 이용하여 클래스형 컴포넌트를 작성하는 방법을 알아보겠습니다.

클래스형 컴포넌트 작성

먼저, 타입스크립트로 클래스형 컴포넌트를 작성하려면 아래와 같이 React.Component를 상속받아야 합니다.

import React from 'react';

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

interface MyComponentState {
  count: number;
}

class MyComponent extends React.Component<MyComponentProps, MyComponentState> {
  state: MyComponentState = {
    count: 0
  };

  render() {
    return <div>{this.props.name} is {this.props.age} years old.</div>;
  }
}

export default MyComponent;

위 코드에서 MyComponentProps와 MyComponentState는 각각 컴포넌트의 props와 state에서 사용할 데이터의 타입을 정의합니다.

컴포넌트 사용

사용할 때는 아래와 같이 MyComponent를 사용할 수 있습니다.

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

function App() {
  return <MyComponent name="Alice" age={30} />;
}

export default App;

결론

타입스크립트를 사용하여 클래스형 컴포넌트를 작성하면 코드 내의 타입 에러를 줄일 수 있고, 개발 생산성을 향상시킬 수 있습니다. 이제 클래스형 컴포넌트를 작성할 때 타입스크립트를 적극 활용해보세요.

참고 문헌:

React with TypeScript