[react] 리액트로 끝말잇기 게임 만들기

끝말잇기 게임

 

리액트 class/hooks로 구현한
끝말잇기 게임 입니다.

 

예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다.

 

client.jsx

const React = require('react');
const ReactDom = require('react-dom');
const WordRelay = require('./WordRelay')

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

 

WordRelay.jsx - class 방식

클래스 메소드를 무조건 화살표 함수의 문법을 사용합니다.

const React = require('react');

class WordRelay extends React.Component {   
    state = {
        word: '갓디노',
        value: '',
        result: '',
    };
    
    onSubmit = (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.onSubmit}>
                <input ref={this.onRefInput} type="text" value={this.state.value} 
                onChange={this.onChange} />
                <button type="submit">입력</button>
            </form>
            <div>{this.state.result}</div>
            </>
        )
    }
}   

module.exports = WordRelay;

 

 

WordRelay.jsx - hooks 방식

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

const WordRelay = () => {  
    const [word, setWord] = useState('갓디노');
    const [value, setValue] = useState('');
    const [result, setResult] = useState('');
    const inputRef = useRef(null);
    
    const onSubmit = (e) => {
        e.preventDefault();
        //끝말잇기 로직
        if(word[word.length-1] === value[0]) {
            setResult('딩동댕');
            setValue('');
            setWord(value);
            inputRef.current.focus();
        }else{
            setResult('땡');
            setValue('');
            inputRef.current.focus();
            }
        };

    const onChange = (e) => {
        setValue(e.target.value);
    };

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

module.exports = WordRelay;