끝말잇기 소스 hooks로 변경하기

이제 class로 작성한 끝말잇기를 hooks로 바꾸어 보자

• state들 변경
• render삭제
• this.state삭제
• 멤버함수들 const함수로 대체, this로 함수 호출하는 부분 this제거
• this.setState부분 각 setter로 수정
• onRefInput 메쏘드, input변수 필요없음, const inputRef = useRef(null);로 대체
• input tag에서는 ref={useRef}로 사용
• this.input.focus()를 inputRef.current.focus();로 변경

아래와 같다.

const React = require('react');
const ReactDom = require('react-dom');
const { useState, useRef } = React;

//hooks style
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]) { //right
            setWord(value);
            setValue('');
            setResult('정답입니다.');
        }
        else { //failed
            setValue('');
            setResult('틀렸습니다.');
        }
        inputRef.current.focus(); //커서는 항상 input박스로!
    }

    const onChangeInput = (e) => { //text박스에 입력 이벤트가 발생할때마다 value를 새로 렌더링
        setValue(e.target.value);
    }
    return (
            <>
                <div>{word}</div>
                <form onSubmit={onSubmitForm}>
                    <input ref={useRef} value={value} onChange={onChangeInput}/>
                    <button>클릭</button>
                </form>
                <div>{result}</div>
            </>
        );
}

module.exports = WordRelay;

** hooks는 hot-loader적용에 추가적인 설정이 필요하다.

일단 hot-loader을 걷어내고 테스트해보길 바란다.