React 이벤트 핸들러와 Typescript 및 JSX
React와 Typescript를 사용하는 경우, React 컴포넌트에서 상태를 업데이트하는 동안 문제가 발생할 수 있습니다. 이 블로그 포스트에서는 JSX와 함께 React 및 Typescript의 이벤트 핸들러를 사용하여이러한 문제를 해결하는 방법을 살펴보겠습니다.
문제 분석: React 컴포넌트에서 상태 업데이트
Typescript로 React 컴포넌트를 작업 할 때 상태를 업데이트하는 것은 때로는 도전적 일 수 있습니다. 제공된 코드 스니펫에서 handleClick 및 handleChange 두 가지 이벤트 핸들러가 상태를 올바르게 업데이트하지 않습니다. this의 값을 통해 상태 객체를 사용할 수 없으므로 예기치 않은 동작이 발생합니다.
해결 방법 1: “this”와 함께 메서드 바인딩하기
클래스 구문을 사용하여 생성 된 React 컴포넌트의 경우, bind 메서드를 사용하여 메서드를 수동으로 컴포넌트 인스턴스에 바인딩해야합니다. 메서드를 바인딩 함으로써 이벤트 핸들러 내에서 올바른 인스턴스의 컴포넌트가 참조됨을 보장합니다.
class Tester extends React.Component<any, TestState> {
constructor(props) {
super(props);
this.state = { liked: false, name: "Anders" };
this.handleClick = this.handleClick.bind(this);
this.handleChange = this.handleChange.bind(this);
}
handleClick(evt, domNode): void {
this.setState({ liked: !this.state.liked, name: this.state.name });
}
handleChange(evt, a, b, c): void {
this.setState({ liked: this.state.liked, name: evt.target.value });
}
//...
}해결 방법 2: 렌더 메서드에서 메서드 직접 바인딩하기
다른 접근 방식은 렌더 메서드에서 메서드를 직접 바인딩하는 것입니다. 이렇게하면 추가적인 생성자 코드가 필요 없습니다. 그러나 이렇게하면 각 렌더링마다 새로운 함수 인스턴스가 생성되므로 과도하게 사용하는 경우 성능에 영향을 줄 수 있습니다.
render() {
var text = this.state.liked ? "좋아요 " : "아직 좋아하지 않았어요 ";
return (
<div>
You {text} {this.state.name}
<button onClick={this.handleClick.bind(this)}>좋아요</button>
<input value={this.state.name} onChange={this.handleChange.bind(this)} />
</div>
);
}해결 방법 3: 이벤트 핸들러를 위한 화살표 함수 사용
컴포넌트의 올바른 인스턴스를 자동으로 바인딩하는 또 다른 방법은 이벤트 핸들러에 화살표 함수를 사용하는 것입니다. 화살표 함수는 this의 렉시컬 스코프를 캡처하여 수동 바인딩이 필요하지 않습니다.
handleClick = (evt, domNode):void => {
this.setState({ liked: !this.state.liked, name: this.state.name });
};
render() {
//...
return (
<div>
//...
<button onClick={() => this.handleClick()}>좋아요</button>
//...
</div>
);
}결론
이 블로그 포스트에서는 Typescript 및 JSX로 작성된 React 컴포넌트에서 상태 업데이트 문제를 해결하는 방법에 대해 논의했습니다. 생성자나 렌더 메서드에서 컴포넌트 인스턴스와 이벤트 핸들러 메서드를 바인딩함으로써 상태가 올바르게 업데이트 됨을 보장합니다.
this의 올바른 인스턴스를 바인딩하는 다양한 방법을 이해함으로써 React 컴포넌트에서 이벤트 기반 상호작용을 자신 있게 처리하여 부드럽고 예측 가능한 사용자 경험을 제공 할 수 있습니다.
프로젝트 요구 사항에 가장 적합한 방법을 선택하고 리소스의 효율적인 활용을 통해 최적의 성능을 달성해야 합니다.
