section1. 2-8. 끝말잇기 Class 만들기

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

class WordRelay extends Component{
    state={
        word:'제로초',
        value:'',
        result:'',
    }
    input;

    onChange = e => {
        const value = e.target.value;
        this.setState({value});
    }
    onSubmit = e => {
        e.preventDefault();
        const word = this.state.word;
        const lastChar = word[word.length-1];
        const input = this.state.value;
        if(lastChar === input[0]){
            this.setState({
                result:'딩동댕',
                word:input,
                value:'',
            })
        }else{
            this.setState({
                result:'땡',
                value:'',
            })
        }
        this.input.focus();
    }

    input;
    onRefInput = c =>{
        this.input = c;
    }

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

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

일단 강의 안보고 만든 작품 

 

리액트에서 value와 onChange는 세트이다. onChange를 안넣을거면 defaultValue를 넣어줘야함.

(defaultValue = {this.state.value})

※컨트롤드 인풋, 언컨트롤드 인풋으로 리액트 공식문서를 찾아보면 된다고 하심.