[typescript] JSX에서 컴포넌트의 상태 업데이트 방법

[typescript] JSX에서 컴포넌트의 상태 업데이트 방법

18 Dec 2023

typescript

JSX에서 컴포넌트의 상태를 업데이트하는 방법에 대해 알아보겠습니다.

상태(State)란 무엇인가요?

컴포넌트의 상태는 컴포넌트 내부의 데이터를 관리하는 데 사용됩니다. 상태를 사용하여 컴포넌트의 동작 및 표시를 업데이트할 수 있습니다.

상태 업데이트하기

`useState` 훅 사용

import React, { useState } from 'react';

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

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

위의 예제에서 useState 훅을 사용하여 count 상태를 초기화하고, setCount 함수를 사용하여 상태를 업데이트합니다.

`setState` 함수 사용

import React, { Component } from 'react';

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

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

위의 예제에서 setState 함수를 사용하여 count 상태를 업데이트합니다.

결론

JSX에서 컴포넌트의 상태를 업데이트하는 방법에 대해 알아보았습니다. useState 훅 또는 setState 함수를 사용하여 상태를 업데이트할 수 있습니다.

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