2021.04.17

끝말잇기 만들기

• 컴포넌트는 따로 파일로 분리해서 만든 후 불러와서 사용한다.
• 코드를 컴포넌트 별로 쪼개서 구현을 하면 개발하기 편해진다.
• 하지만 html파일에서 인식하는 script의 src는 (즉, js파일은) 딱 하나만 적용된다.
• 컴포넌트 별로 쪼개진 여러 js, jsx 파일이 하나로 합쳐져야 html에서 인식이 된다.
• 이렇게 하나로 합치는 역할을 웹팩이 해준다.
• 기존에 만들어 둔 webpack 설정을 사용한다.

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

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

//WordRelay.jsx
const React = require("react");
const { Component } = React;
const { useState, useRef } = React;

//class 코드
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();
        }
    };

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

//hooks 코드
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]) {
            setResult("정답");
            setWord(value);
            setValue("");
            inputRef.current.focus();
        } else {
            setResult("땡");
            setValue("");
            inputRef.current.focus();
        }
    };

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

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

module.exports = WordRelay;

• input에서 value, onChange속성은 세트이다 두 개 를 같이 입력하거나 아니면 defaultValue속성을 입력해야 한다.

스크린샷