끝말잇기를 Class 컴포넌트로 만들어보면서 React의 createRef
를 이용해 ref 타입추론을 해본다.
WordRelayClass.tsx
import * as React from "react";
import { Component, createRef } from "react";
interface State {
word: string;
value: string;
result: string;
}
class wordRelay extends Component<{}, State> {
state = {
word: "비키",
value: "",
result: "",
};
onSubmitForm = (e: React.FormEvent<Element>) => {
e.preventDefault();
// createRef로 설정한 input의 current를 변수로 지정
const input = this.onRefInput.current;
if (this.state.word[this.state.word.length - 1] === this.state.value[0]) {
this.setState({
result: "딩동댕",
word: this.state.value,
value: "",
});
} else {
this.setState({
result: "땡",
value: "",
});
}
if (input) {
input.focus();
}
};
onChangeInput = (e: React.ChangeEvent<HTMLInputElement>) => {
this.setState({ value: e.currentTarget.value });
};
// React의 createRef를 통해 타입추론을 해준다.
onRefInput = createRef<HTMLInputElement>();
render() {
return (
<>
<div>{this.state.word}</div>
<form onSubmit={this.onSubmitForm}>
<input ref={this.onRefInput} value={this.state.value} onChange={this.onChangeInput} />
<button>클릭!!</button>
</form>
<div>{this.state.result}</div>
</>
);
}
}
export default wordRelay;