끝말잇기 Hooks로 전환하기

기존 코드를 hooks로 전환 해보자. state와 ref 부분을 바꿔준다. 

// 기존 WordRelay.jsx

const React = require('react');
const { Component } = React;

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();
        }
    };

    onChange = (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>
        </>
        );
    }
}

module.exports = WordRelay;

특징인 점은 hooks에서 const 변수명을 활용해서 함수를 만들어 준 함수를 선언해주고(ex) onChangeInput, onSubmitForm) this.state를 쓰지 않는다.

그리고 react에서는 class 대시 className을 쓴다.

// Hooks로 바꾼 WordRelay.jsx

const React = require('react');
const { useState } = require('react');

const WordRelay = () => {
    const [word, setWord] = useState('짜장면!');
    const [value, setValue] = useState('');
    const [result, setResult] = useState('');
    const inputEl = React.useRef(null);

    const onSubmitForm = (e) => {
        e.preventDefault();
        if (word[word.length - 1] === value[0]) {
            setResult('딩동댕');
            setWord(value);
            setValue('');
            inputEl.current.focus();
        } else {
            setResult('땡');
            setValue('');
            inputEl.current.focus();
        }
    };

    return (
        <>
            <div>{word}</div>
            <form onSubmit={onSubmitForm}>
                <input
                    ref={inputEl}
                    value={value}
                    onChange={(e) => setValue(e.currentTarget.value)}
                />
                <button>입력!</button>
            </form>
            <div>{result}</div>
        </>
    );
};

module.exports = WordRelay;

 

 

 

 

 

 

 

 

 

<출처 조현영: 웹 게임을 만들며 배우는 React>

https://www.inflearn.com/course/web-game-react/dashboard

[무료] 웹 게임을 만들며 배우는 React - 인프런 | 강의