[typescript] JSX에서 컴포넌트의 state 값 사용하는 방법

18 Dec 2023

typescript

JSX에서 React 컴포넌트의 state 값을 사용하는 것은 React 애플리케이션을 개발하는 데 중요한 요소입니다. state 값은 컴포넌트의 상태를 나타내며, 변경 가능한 값을 저장하고 관리하는 데 사용됩니다. 이 글에서는 TypeScript와 JSX를 사용하여 React 컴포넌트의 state 값을 다루는 방법을 알아보겠습니다.

1. 인터페이스를 이용한 상태 정의

먼저, state 값의 타입을 정의하기 위해 TypeScript의 인터페이스를 사용합니다. 예를 들어, 다음과 같이 컴포넌트의 state를 정의할 수 있습니다.

interface MyComponentState {
  count: number;
  isLoaded: boolean;
  data: any;
}

위의 예에서는 MyComponentState라는 인터페이스를 정의하고, count, isLoaded, data와 같은 state 값의 이름과 타입을 지정했습니다.

2. 클래스 컴포넌트에서 상태 사용

다음으로, 클래스 컴포넌트에서 state 값을 사용하는 방법을 살펴봅시다. 아래의 예제는 TypeScript와 JSX로 작성된 클래스 컴포넌트에서 state 값을 활용하는 방법을 보여줍니다.

import React, { Component } from 'react';

class MyComponent extends Component<{}, MyComponentState> {
  constructor(props: {}) {
    super(props);
    this.state = {
      count: 0,
      isLoaded: false,
      data: null,
    };
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment Count
        </button>
      </div>
    );
  }
}

위의 예제에서는 MyComponent 클래스 컴포넌트에서 MyComponentState 인터페이스를 상속받아 사용하고, constructor 메서드를 활용하여 초기 state 값을 설정하였습니다.

3. 함수형 컴포넌트에서 상태 사용

마지막으로, 함수형 컴포넌트에서도 state 값을 사용할 수 있습니다. 하지만 함수형 컴포넌트에서는 useState 훅을 사용하여 state 값을 다룹니다.

import React, { useState } from 'react';

const MyFunctionalComponent: React.FC = () => {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment Count
      </button>
    </div>
  );
};

위의 예제는 useState 훅을 사용하여 count state 값을 다룬 함수형 컴포넌트를 보여줍니다.

이렇게 JSX에서 TypeScript를 사용하여 클래스 컴포넌트와 함수형 컴포넌트에서 state 값을 다루는 방법에 대해 알아보았습니다. React 애플리케이션을 개발하면서 TypeScript와 JSX를 함께 사용하여 코드를 더욱 안정적으로 작성할 수 있습니다.

참고문헌: