4. 끝말잇기
2021.04.17
끝말잇기 만들기
- 컴포넌트는 따로 파일로 분리해서 만든 후 불러와서 사용한다.
- 코드를 컴포넌트 별로 쪼개서 구현을 하면 개발하기 편해진다.
- 하지만 html파일에서 인식하는 script의 src는 (즉, js파일은) 딱 하나만 적용된다.
- 컴포넌트 별로 쪼개진 여러 js, jsx 파일이 하나로 합쳐져야 html에서 인식이 된다.
- 이렇게 하나로 합치는 역할을 웹팩이 해준다.
- 기존에 만들어 둔 webpack 설정을 사용한다.
//main.jsx
const React = require('react');
const ReactDom = require('react-dom');
const WordRelay = require('./WordRelay');
ReactDom.render(<WordRelay />, document.querySelector('#root'));
//WordRelay.jsx
const React = require("react");
const { Component } = React;
const { useState, useRef } = React;
//class 코드
class WordRelay extends Component {
state = {
word: "토마토",
value: "",
result: "",
};
onSubmitForm = (e) => {
e.preventDefault();
if (
this.state.word[this.state.word.length - 1] === this.state.value[0]
) {
this.setState({
result: "정답",
word: this.state.value,
value: "",
});
this.input.focus();
} else {
this.setState({
result: "땡",
value: "",
});
this.input.focus();
}
};
onChangeInput = (e) => {
this.setState({ value: e.target.value });
};
input;
onRefInput = (c) => {
this.input = c;
};
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>
</>
);
}
}
//hooks 코드
const WordRelay = () => {
const [word, setWord] = useState("토마토");
const [value, setValue] = useState("");
const [result, setResult] = useState("");
const inputRef = useRef(null);
const onSubmitForm = (e) => {
e.preventDefault();
if (word[word.length - 1] === value[0]) {
setResult("정답");
setWord(value);
setValue("");
inputRef.current.focus();
} else {
setResult("땡");
setValue("");
inputRef.current.focus();
}
};
const onChangeInput = (e) => {
setValue(e.target.value);
};
return (
<>
<div>{word}</div>
<form onSubmit={onSubmitForm}>
<input ref={inputRef} value={value} onChange={onChangeInput} />
<button>입력</button>
</form>
<div>{result}</div>
</>
);
};
module.exports = WordRelay;
input
에서 value
, onChange
속성은 세트이다 두 개 를 같이 입력하거나 아니면 defaultValue
속성을 입력해야 한다.
스크린샷
//main.jsx
const React = require('react');
const ReactDom = require('react-dom');
const WordRelay = require('./WordRelay');
ReactDom.render(<WordRelay />, document.querySelector('#root'));
//WordRelay.jsx
const React = require("react");
const { Component } = React;
const { useState, useRef } = React;
//class 코드
class WordRelay extends Component {
state = {
word: "토마토",
value: "",
result: "",
};
onSubmitForm = (e) => {
e.preventDefault();
if (
this.state.word[this.state.word.length - 1] === this.state.value[0]
) {
this.setState({
result: "정답",
word: this.state.value,
value: "",
});
this.input.focus();
} else {
this.setState({
result: "땡",
value: "",
});
this.input.focus();
}
};
onChangeInput = (e) => {
this.setState({ value: e.target.value });
};
input;
onRefInput = (c) => {
this.input = c;
};
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>
</>
);
}
}
//hooks 코드
const WordRelay = () => {
const [word, setWord] = useState("토마토");
const [value, setValue] = useState("");
const [result, setResult] = useState("");
const inputRef = useRef(null);
const onSubmitForm = (e) => {
e.preventDefault();
if (word[word.length - 1] === value[0]) {
setResult("정답");
setWord(value);
setValue("");
inputRef.current.focus();
} else {
setResult("땡");
setValue("");
inputRef.current.focus();
}
};
const onChangeInput = (e) => {
setValue(e.target.value);
};
return (
<>
<div>{word}</div>
<form onSubmit={onSubmitForm}>
<input ref={inputRef} value={value} onChange={onChangeInput} />
<button>입력</button>
</form>
<div>{result}</div>
</>
);
};
module.exports = WordRelay;
input
에서 value
, onChange
속성은 세트이다 두 개 를 같이 입력하거나 아니면 defaultValue
속성을 입력해야 한다.Author And Source
이 문제에 관하여(4. 끝말잇기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@wdh008/React-4.-끝말잇기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)