React with TypeScript에서는 구성 요소를 생성하기 위해 기능적 구성 요소와 클래스 구성 요소라는 두 가지 주요 접근 방식을 사용할 수 있습니다. 두 접근 방식 모두 props 및 state 작업을 허용하지만 약간 다른 패러다임을 사용합니다. TypeScript는 정적 타이핑을 제공하여 개발 안전성을 더욱 강화합니다. 이를 통해 props와 상태의 모양을 정확하게 정의할 수 있습니다.

아래에서는 코드 일관성과 가독성을 보장하기 위해 인터페이스를 사용하여 유형을 정의하는 다양한 구성 요소의 예를 살펴보겠습니다.

F-1. 소품과 상태가 없는 기능적 구성 요소

이 경우 소품이나 상태를 사용하지 않는 간단한 기능적 구성 요소는 다음과 같습니다.

import React from 'react';

const FunctionalComponent: React.FC = () => {
  return 
Hello, DEV.to!
;
};

이 구성요소는 정적 텍스트만 표시합니다.

F-2. 소품이 포함된 기능적 구성요소

props를 통해 데이터를 전달하려는 경우 인터페이스를 사용하여 해당 데이터의 형식을 정의합니다.

import React from 'react';

interface IMyProps {
  name: string;
}

const FunctionalComponentWithProps: React.FC = ({ name }) => {
  return 
Hello, {name}!
;
};

여기 IMyProps에는 개인화된 인사말을 표시하는 데 사용되는 이름이 포함되어 있습니다.

F-3. 상태가 포함된 기능적 구성요소

기능적 구성 요소에서 상태를 사용할 때 React의 useState 후크를 사용합니다.

import React, { useState } from 'react';

const FunctionalComponentWithState: React.FC = () => {
  const [count, setCount] = useState(0);

  return (
    

      
Count: {count}
       setCount(count   1)}>Increase
    
  );
};

이 구성요소는 로컬 상태를 사용하여 카운터를 추적합니다.

F-4. 소품과 상태가 있는 기능적 구성 요소

props와 state를 결합하면 props를 통해 데이터를 수신하고 내부적으로 상태를 조작하는 유연한 구성 요소를 가질 수 있습니다.

import React, { useState } from 'react';

interface IMyProps {
  initialCount: number;
}

const FunctionalComponentWithPropsAndState: React.FC = ({ initialCount }) => {
  const [count, setCount] = useState(initialCount);

  return (
    

      
Count: {count}
       setCount(count   1)}>Increase
    
  );
};

이 구성 요소는 동적 카운터 추적을 위한 내부 상태와 prop으로initialCount를 사용합니다.

K-1. props와 state가 없는 클래스 컴포넌트

React에서 props와 state가 없는 클래스 컴포넌트는 다음과 같습니다:

import React from 'react';

class ClassComponent extends React.Component {
  render() {
    return 
Hello, DEV.to!
;
  }
}

정적 텍스트를 표시하는 간단한 클래스 구성요소입니다.

K-2. 소품이 포함된 클래스 구성요소

클래스 구성 요소가 소품을 받으면 다음 인터페이스를 사용하여 소품을 정의합니다.

import React from 'react';

interface IMyProps {
  name: string;
}

class ClassComponentWithProps extends React.Component {
  render() {
    return 
Hello, {this.props.name}!
;
  }
}

기능적 구성요소와 마찬가지로 여기서는 소품을 사용하여 개인화된 데이터를 표시합니다.

K-3. 상태가 포함된 클래스 구성요소

상태가 있는 클래스 구성 요소의 경우 생성자 내부에 상태를 정의합니다.

• 생성자의 빈 괄호

props를 사용하지 않는 경우 생성자에서 괄호를 비워두면 됩니다.

import React from 'react';

interface IMyState {
  count: number;
}

class ClassComponentWithState extends React.Component {
  constructor() {
    super({});
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      

        
Count: {this.state.count}
         this.setState({ count: this.state.count   1 })}>Increase
      
    );
  }
}

• 소품 유형으로 {}를 명시적으로 지정

props에 대해 명시적으로 표시하려면 다음과 같이 {}를 유형으로 지정할 수 있습니다.

import React from 'react';

interface IMyState {
  count: number;
}

class ClassComponentWithState extends React.Component {
  constructor(props: {}) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      

        
Count: {this.state.count}
         this.setState({ count: this.state.count   1 })}>Increase
      
    );
  }
}

-> 두 경우 모두 TypeScript와 React가 올바르게 작동합니다. 구성 요소가 props를 사용하지 않는 경우 생성자에서 빈 괄호를 사용할 수 있지만 초기화 오류를 방지하려면 슈퍼 호출에서 {}를 전달해야 합니다.

이 구성요소는 상태를 사용하여 카운터 변경 사항을 추적합니다.

K-4. props와 state가 있는 클래스 컴포넌트

props와 state를 모두 사용하는 클래스 구성 요소의 경우 두 개념을 결합할 수 있습니다.

import React from 'react';

interface IMyProps {
  initialCount: number;
}

interface IMyState {
  count: number;
}

class ClassComponentWithPropsAndState extends React.Component {
  constructor(props: IMyProps) {
    super(props);
    this.state = {
      count: props.initialCount
    };
  }

  render() {
    return (
      

        
Count: {this.state.count}
         this.setState({ count: this.state.count   1 })}>Increase
      
    );
  }
}

이 구성 요소는 props를 통해 초기 카운터를 수신하고 내부적으로 상태를 추가로 조작합니다.

TypeScript에서 인터페이스를 사용하면 특히 더 복잡한 데이터 구조로 작업할 때 더 나은 타이핑과 더 쉬운 코드 가독성을 얻을 수 있습니다. 이러한 기본 예제를 통해 React 및 TypeScript를 사용하여 함수형 및 클래스 구성 요소를 작성하기 위한 기초를 갖췄습니다.