[typescript] JSX에서 컴포넌트의 state 초기값 설정 방법

18 Dec 2023

typescript

JSX에서 컴포넌트의 state 초기값을 설정하는 방법에 대해 알아보겠습니다.

초기값 설정

JSX에서 컴포넌트의 state 초기값을 설정하려면 다음과 같이 constructor 메서드를 사용하여 초기값을 설정할 수 있습니다.

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

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

위 예시에서 constructor 메서드 내에서 this.state에 초기값을 설정했습니다. 이제 this.state를 통해 초기값을 참조할 수 있게 됩니다.

setState 메서드를 통한 state 업데이트

컴포넌트 내에서 state 값을 업데이트하려면 setState 메서드를 사용해야 합니다.

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

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

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

위의 예시에서 handleClick 메서드 내에서 setState를 사용하여 count 상태를 업데이트하고 있습니다.

위와 같이 JSX에서 컴포넌트의 state 초기값을 설정하고 업데이트하는 방법에 대해 알아보았습니다. 추가적인 정보가 필요하다면 관련 React 공식 문서를 참고하시기 바랍니다.

React 공식 문서