section1. 2-10. 끝말잇기 Hooks로 전환하기

//필요로 하는 패키지나 라이브러리 불러오기
const React = require('react');
const {useState, useRef} = React;


const WordRelayHooks = () => {
    const [word, setWord] = useState('제로초');
    const [value, setValue] = useState('');
    const [result, setResult] = useState('');
    const inputRef = useRef(null);

    const onChange = e => {
        const value = e.target.value;
        setValue((prev)=>value);
    }
    const onSubmit = e => {
        e.preventDefault();
        const lastChar = word[word.length-1];
        const input = value;
        if(lastChar === input[0]){
            setResult('딩동댕');
            setWord((prev)=>input);
            setValue((prev)=>'');
        }else{
            setResult('땡');
            setValue('');
        }
        inputRef.current.focus();
    }

    return (
        <>
            <div>{word}</div>
            <form onSubmit={onSubmit}>
                <input ref={inputRef} type='text' onChange={onChange} value={value}/>
                <button>입력</button>
            </form>
            <div>{result}</div>
        </>
    );

}

//쪼갠 파일에서 쓰는 컴포넌트를 밖에서도 사용할 수 있게 해주는 것. (이것이 노드의 모듈 시스템)
module.exports = WordRelayHooks;

WordRelayHooks.jsx

 

const React = require('react');
const ReactDom = require('react-dom');
const WordRelay = require('./WordRelay'); //module.export를 했기 때문에 require로 가져올 수 있다.
const WordRelayHooks = require('./WordRelayHooks');

//ReactDom.render(<WordRelay/>, document.querySelector('#root'));
ReactDom.render(<WordRelayHooks/>, document.querySelector('#root'));

Client.jsx