44 lines
1.2 KiB
JavaScript
44 lines
1.2 KiB
JavaScript
const React = require('react');
|
|
const { useState, useRef } = React;
|
|
|
|
const WordRelayHooks = () => {
|
|
const [word, setword] = useState('리액트');
|
|
const [value, setvalue] = useState('');
|
|
const [result, setresult] = useState('');
|
|
const [words, setwords] = useState('리액트');
|
|
const inputRef = useRef(null);
|
|
|
|
const onSubmitForm = (e) => {
|
|
e.preventDefault();
|
|
if (word[word.length - 1] === value[0]) {
|
|
setresult('딩동댕');
|
|
setword(value);
|
|
setwords(words + ' => ' + value);
|
|
setvalue('');
|
|
|
|
inputRef.current.focus();
|
|
} else {
|
|
setresult('땡');
|
|
setvalue('');
|
|
inputRef.current.focus();
|
|
}
|
|
}
|
|
|
|
const onChangeInput = (e) => {
|
|
setvalue(e.currentTarget.value);
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<div>{word}</div>
|
|
<form onSubmit={onSubmitForm}>
|
|
<input ref={inputRef} value={value} onChange={onChangeInput} />
|
|
<button>입력!</button>
|
|
</form>
|
|
<div>{result}</div>
|
|
<div>{words}</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
module.exports = WordRelayHooks; |