JSX는 React 애플리케이션에서 UI를 작성하는 데 사용되는 JavaScript의 확장 문법이다. 클래스형 컴포넌트는 React에서 UI를 생성하는 데 사용되는 또 다른 방법이다. 이 포스트에서는 JSX에서 클래스형 컴포넌트를 작성하는 방법에 대해 설명하겠다.

1. 클래스형 컴포넌트 만들기

먼저, 다음과 같이 React.Component 클래스를 확장하여 클래스형 컴포넌트를 만들 수 있다.

import React from 'react';

class MyComponent extends React.Component {
  render() {
    return <div>Hello, World!</div>;
  }
}

export default MyComponent;

위의 예시에서, MyComponent 클래스는 React.Component를 확장하고 render 메서드를 구현하여 JSX를 반환한다.

2. Props 및 State 사용하기

클래스형 컴포넌트는 constructor 메서드를 사용하여 초기 상태(state)를 설정하고, this.state를 통해 상태를 접근할 수 있다. 또한 this.props를 통해 부모 컴포넌트로부터 전달된 속성(props)에 접근할 수 있다.

import React from 'react';

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

  render() {
    return <div>Count: {this.state.count}</div>;
  }
}

export default MyComponent;

위의 예시에서, MyComponent 클래스는 count라는 상태를 가지고 있으며, render 메서드에서 상태를 사용하여 UI를 렌더링한다.

3. 라이프사이클 메서드 활용하기

클래스형 컴포넌트는 라이프사이클 메서드를 사용하여 컴포넌트의 수명 주기에 따른 작업을 수행할 수 있다. 예를 들어, componentDidMount 메서드는 컴포넌트가 마운트된 후에 호출되는데, 네트워크 요청이나 초기화 작업 등을 수행하기에 적합하다.

import React from 'react';

class MyComponent extends React.Component {
  componentDidMount() {
    // 컴포넌트가 마운트된 후에 실행될 작업 수행
  }

  render() {
    return <div>Hello, World!</div>;
  }
}

export default MyComponent;

마치며

이러한 방법으로, JSX에서 클래스형 컴포넌트를 작성하고 사용할 수 있다. 클래스형 컴포넌트는 React 애플리케이션에서 상태와 라이프사이클 이벤트를 다루는 데 유용하며, 주요 기능들을 잘 활용하면 높은 성능의 UI를 구축할 수 있다.

참고: React 공식 문서