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

18 Dec 2023

typescript

JSX에서 컴포넌트의 state를 업데이트하는 방법은 매우 중요합니다. 상호작용적이고 동적인 UI를 구축하기 위해서는 컴포넌트의 state를 적절하게 업데이트할 수 있어야 합니다. 이 게시물에서는 TypeScript와 JSX를 사용하는 경우, 컴포넌트의 state를 업데이트하는 방법에 대해 알아보겠습니다.

State 업데이트 방법

JSX에서 컴포넌트의 state를 업데이트하는 가장 일반적인 방법은 setState 메서드를 사용하는 것입니다. TypeScript에서는 이를 활용하여 다음과 같이 state를 업데이트할 수 있습니다.

import React, { Component } from 'react';

interface MyComponentProps {
  // props 정의
}

interface MyComponentState {
  count: number;
}

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

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

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

export default MyComponent;

위 예제에서 handleButtonClick 메서드는 setState를 호출하여 count를 업데이트하고 있습니다. 이를 통해 버튼 클릭 시 count의 값을 증가시킬 수 있습니다.

Immutability 주의

setState를 사용하여 state를 업데이트할 때, 불변성(Immutability) 을 유지해야 합니다. React에서는 불변성을 유지함으로써 성능을 최적화하고 예기치 않은 문제를 방지할 수 있습니다. 따라서 객체나 배열을 업데이트할 때에는 불변성을 유지하는 방법을 주의깊게 고려해야 합니다.

결론

JSX와 TypeScript를 사용하여 컴포넌트의 state를 업데이트하는 방법을 살펴보았습니다. setState를 사용하여 state를 업데이트하고, 불변성을 유지하는 것이 중요하다는 점을 기억해야 합니다. 올바른 state 업데이트 방법을 통해 리액트 애플리케이션을 보다 효율적으로 구축할 수 있습니다.

참고 문헌: