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

18 Dec 2023

typescript

JSX를 사용하여 React 애플리케이션을 개발할 때, 컴포넌트의 state를 효과적으로 다루는 것이 중요합니다. TypeScript와 JSX를 함께 사용할 때 컴포넌트의 state를 다루는 방법을 알아봅시다.

1. 상태를 가진 컴포넌트 생성하기

우선, 상태를 가진 컴포넌트를 만들어봅시다. useState 훅을 사용하여 상태를 초기화하고 상태를 변경하는 메서드를 가져올 수 있습니다.

import React, { useState } from 'react';

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

  // ...
}

useState 함수를 통해 count 상태와 setCount 메서드를 선언하고 초기값을 0으로 설정했습니다.

2. 상태 사용하기

이제, 상태를 JSX 내부에서 사용할 수 있습니다.

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase Count</button>
    </div>
  );
}

count 상태를 JSX 내부에서 중괄호{}로 감싸서 사용합니다.

이제 TypeScript와 JSX를 함께 사용하여 컴포넌트의 상태를 효과적으로 다루는 방법을 배웠습니다. 이러한 방식으로 컴포넌트의 상태를 관리할 수 있으며, 타입 안정성과 함께 JSX를 사용하는 장점을 모두 누릴 수 있습니다.

참고 자료

React 공식 문서: Using the State Hook
TypeScript 공식 문서: React & Web Components

위 자료들을 통해 더 많은 정보를 얻을 수 있습니다.