[2022.07.08] 리액트로 간단한 끝말잇기 게임만들기 (함수&클래스형 컴포넌트)

제로초님 강좌를 참고하여 만든 간단한 끝말잇기 게임

지난 번에 구구단 게임 만들었을 때와 거의 비슷한 형태이다.

함수 컴포넌트

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

function WordRelay2() {
  const [word, setWord] = useState('이유');
  const [userInput, setUserInput] = useState('');
  const [result, setResult] = useState('');
  let inputRef = useRef(null);

  const onSubmit = (e) => {
    e.preventDefault();

    if (userInput[0] === word[word.length - 1]) {
      setResult('정답!');
      setWord(userInput);
      setUserInput('');
    } else {
      setResult('오답!');
      setUserInput('');
    }
    inputRef.current.focus();
  };

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

  return (
    <div>
      <h2>{word}</h2>
      <form onSubmit={onSubmit}>
        <input ref={inputRef} type="text" onChange={onChange} value={userInput} />
        <button>확인</button>
      </form>
      <p>{result}</p>
    </div>
  );
}

module.exports = WordRelay2;

클래스 컴포넌트

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

class WordRelay extends Component {
  state = {
    word: '이유',
    value: '',
    result: '',
  };

  input;

  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: '',
      });
    } else {
      this.setState({
        result: '땡!',
        value: '',
      });
    }
    this.input.focus();
  };

  onChange = (e) => {
    this.setState({ value: e.target.value });
  };

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

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

module.exports = WordRelay;

클래스 컴포넌트를 만들 때는 제로초님 영상을 보면서 그대로 따라했고 함수 컴포넌트는 따라했던 내용대로 함수 컴포넌트로 변경해보았다.
아직 함수 컴포넌트 useRef 사용하는 방법이 가물가물해서 어떻게 했더라 하고 다시 찾아보게 되는 것 같다..ㅋㅋ

주말에 똑같은 내용을 함수 컴포넌트, 클래스 컴포넌트로 각각 다시 만들어봐야겠다.

---

참고 자료
React 기본 강좌 2-10. 끝말잇기 Hooks로 전환하기