JSX를 사용하여 React 컴포넌트를 작성하다보면, 각 컴포넌트의 state를 초기화하는 방법에 대해 궁금할 수 있습니다. 특히 TypeScript와 함께 작업할 때 이 작업은 더욱 중요해집니다. 이 포스트에서는 TypeScript와 JSX를 사용하여 React 컴포넌트의 state를 초기화하는 방법을 살펴보겠습니다.

1. State 초기화하기

보통 React 함수 컴포넌트 내에서 state를 초기화할 때에는 useState 훅을 사용합니다.

import React, { useState } from 'react';

const MyComponent: React.FC = () => {
  // 초기값이 0인 count state를 선언
  const [count, setCount] = useState(0);

  // ... (이하 생략)
}

위 예제에서 useState 함수를 사용하여 count라는 state를 초기값 0으로 초기화했습니다.

2. TypeScript에서 초기 state 타입 지정하기

TypeScript를 사용하면, state의 타입을 명시적으로 지정하는 것이 중요합니다. 이를 위해서는 useState 함수를 호출할 때, 상태의 타입을 제네릭으로 전달해야 합니다.

import React, { useState } from 'react';

interface MyComponentState {
  count: number;
  name: string;
}

const MyComponent: React.FC = () => {
  // 초기값이 주어진 MyComponentState를 타입으로 하는 state를 선언
  const [state, setState] = useState<MyComponentState>({ count: 0, name: 'John' });

  // ... (이하 생략)
}

위 예제에서 useState의 제네릭으로 MyComponentState 인터페이스를 전달하여, 해당 인터페이스에 명시된 대로 state를 초기화할 수 있습니다.

3. Class 컴포넌트에서 state 초기화하기

Class 컴포넌트를 사용하는 경우, constructor 안에서 state를 초기화합니다.

import React, { Component } from 'react';

interface MyComponentState {
  count: number;
  name: string;
}

class MyComponent extends Component<{}, MyComponentState> {
  constructor(props: {}) {
    super(props);
    this.state = {
      count: 0,
      name: 'John'
    };
  }

  // ... (이하 생략)
}

Class 컴포넌트에서는 Component를 상속받은 후, constructor 메서드 내에서 this.state를 초기화하여 사용합니다.

마치며

이번 포스트에서는 TypeScript와 JSX에서 React 컴포넌트의 state를 초기화하는 방법에 대해 알아보았습니다. useState를 사용하여 함수 컴포넌트에서, 그리고 constructor 메서드를 사용하여 Class 컴포넌트에서 state를 초기화하는 방법을 살펴보았습니다. 이를 참고하여, 앞으로의 React 프로젝트에서 효과적으로 state를 다룰 수 있기를 바라겠습니다.

더 많은 정보는 React 공식 문서를 참고하시기 바랍니다.