//필요로 하는 패키지나 라이브러리 불러오기
const React = require('react');
const {Component} = React;
class WordRelay extends Component{
state={
word:'제로초',
value:'',
result:'',
}
input;
onChange = e => {
const value = e.target.value;
this.setState({value});
}
onSubmit = e => {
e.preventDefault();
const word = this.state.word;
const lastChar = word[word.length-1];
const input = this.state.value;
if(lastChar === input[0]){
this.setState({
result:'딩동댕',
word:input,
value:'',
})
}else{
this.setState({
result:'땡',
value:'',
})
}
this.input.focus();
}
input;
onRefInput = c =>{
this.input = c;
}
render() {
return (
<>
<div>{this.state.word}</div>
<form onSubmit={this.onSubmit}>
<input ref={this.onRefInput} type='text' onChange={this.onChange} value={this.state.value}/>
<button>입력</button>
</form>
<div>{this.state.result}</div>
</>
);
}
}
//쪼갠 파일에서 쓰는 컴포넌트를 밖에서도 사용할 수 있게 해주는 것. (이것이 노드의 모듈 시스템)
module.exports = WordRelay;일단 강의 안보고 만든 작품
리액트에서 value와 onChange는 세트이다. onChange를 안넣을거면 defaultValue를 넣어줘야함.
(defaultValue = {this.state.value})
※컨트롤드 인풋, 언컨트롤드 인풋으로 리액트 공식문서를 찾아보면 된다고 하심.
'코딩이야기 > 인터넷 강의' 카테고리의 다른 글
| section1. 2-10. 끝말잇기 Hooks로 전환하기 (0) | 2024.05.19 |
|---|---|
| section1. 2-9. 웹팩 데브 서버와 핫 리로딩 (1) | 2024.05.19 |
| section1. 2-7. @babel/preset-env와 plugins (1) | 2024.05.17 |
| section1. 2-5. 웹팩으로 빌드하기 (0) | 2024.05.15 |
| section1. 2-3. webpack설치하기 (2-4포함) (1) | 2024.05.14 |