[typescript] JSX에서 컴포넌트의 state 변경하는 방법

18 Dec 2023

typescript

JSX는 React 애플리케이션에서 컴포넌트를 구성하는 데 사용되는 JavaScript의 확장 문법입니다. JSX에서 컴포넌트의 state를 변경하는 방법은 다음과 같습니다.

setState 메서드 활용

setState 메서드를 사용하여 JSX 내에서 컴포넌트의 state를 변경할 수 있습니다. 예를 들어, 다음은 버튼을 클릭했을 때 state를 변경하는 간단한 예제입니다.

import React, { Component } from 'react';

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

  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleClick}>Increase Count</button>
      </div>
    );
  }
}

export default MyComponent;

위의 예제에서는 setState 메서드를 사용하여 handleClick 메서드에서 count state를 변경하고, 변경된 state를 화면에 렌더링하는 방법을 보여줍니다.

useState(React Hooks)를 사용하는 방법

만약 함수형 컴포넌트를 사용하고 있다면, useState 훅을 사용하여 state를 변경할 수 있습니다. 다음은 useState 훅을 사용하여 count를 변경하는 예제입니다.

import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

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

export default MyComponent;

위의 예제에서는 useState 훅을 사용하여 count state와 setCount 메서드를 정의하고, 버튼 클릭 시 setCount 메서드를 통해 count state를 변경하는 방법을 보여줍니다.

JSX 내에서 컴포넌트의 state를 변경하는 방법은 위와 같으며, setState 메서드나 useState 훅을 활용하여 state를 갱신할 수 있습니다.

자세한 내용은 React 공식 문서를 참고하시기 바랍니다.