As i wish

[React 끝말잇기] React 끝말잇기 본문

React JS

[React 끝말잇기] React 끝말잇기

어면태 2019. 6. 13. 15:47

안녕하세요. 엄티 입니다.

오늘은 React 구구단에 이어서 '끝말잇기'를 만들어 보겠습니다.

잘 아시다시피 저의 포스팅은 '제로초' 님의 유투브 강좌를 기준으로 합니다.

 

'제로초' 님의 리액트 무료 강좌(웹게임)

 

리액트 무료 강좌(웹게임) - YouTube

 

www.youtube.com

그럼 간단하게 끝말잇기를 만들어 보겠습니다. 

먼저 결과창부터 확인해 보겠습니다. 

 

 

처음에 글자가 주어지고요. Input창에 글씨를 입력한 후 끝말잇기가 되면 입력한 글자가 주어진 글자로 변경되고, 끝말잇기가 안되면 Wrong이라고 띄워 주면 되는 간단한 게임입니다.

 

'수벅' 이라고 입력시 Wrong
'스릴러' 라고 입력시 '스릴러'가 주어진 단어로 변경

 

사실 전 포스팅인 구구단과 상당히 비슷하기 때문에 이 포스팅을 보고 계신 여러분이 직접 한번 해보는것을 추천드려서 결과창부터 보여드렸습니다.

 

구구단 웹게임

 

[React 구구단] React 구구단 웹 게임

안녕하세요. 엄티 입니다. 오늘은 React로 간단한 구구단 게임을 만들어 보겠습니다. 기본적인 Project 세팅은 앞선 제 포스팅을 참고 부탁 드립니다. React project setting [React 구구단] React 프로젝트 셋팅..

eomtttttt-develop.tistory.com

한번 해 보신 후 저의 코드와 비교해 보시면 좋을듯 하네요.

 

Class 기반으로 작성한 코드 (word-relay.jsx)

import React from 'react';

class ClassApp extends React.Component {
  state = {
   word: '밤편지 클래스',
   value: '',
   result: ''
  };
  input;

  _onSubmit = (event) => {
    event.preventDefault();

    if (this._isRelayedWord()) {
      this.setState((prevState) => {
        return {
          word: prevState.value,
          value: '',
          result: 'Correct'
        }
       });
    } else {
      this.setState({
        value: '',
        result: 'Wrong'
      });
    }

    this.input.focus(); // Cursor를 옮겨준다.
  }

  _isRelayedWord = () => {
    let resultLastWord = this.state.word[this.state.word.length - 1],
      valueFirstWord = this.state.value[0];

    return resultLastWord === valueFirstWord;
  }

  _onChange = (event) => {
    this.setState({value: event.target.value}) // State를 변경 해준다. (value 변경)
  }

  _onInputRef = (ref) => {
    this.input = ref; // Input cursor를 세팅해준다.
  }

  render() {
    console.log('Rendering');
    return (
      <>
        <div>{this.state.word}</div>
        <form onSubmit={this._onSubmit}>
          <input ref={this._onInputRef} type='text' value={this.state.value} onChange={this._onChange}/>
          <button>Insert!</button>
        </form>
        <div>{this.state.result}</div>
      </>
    );
  }
}

export default ClassApp;

 

Hooks로 작성한 코드 (word-relay-hook.jsx)

import React from 'react';
const { useState, useRef }  = React;

const WordRelay = () => {
  const [word, setWord] = useState('밤편지 훅스');
  const [value, setValue] = useState('');
  const [result, setResult] = useState(''); // Hooks state 사용법
  const input = useRef(null); // Hooks ref 사용법

  const _onSubmit = (event) => {
    event.preventDefault();

    if (_isRelayedWord()) {
      // 기본 Class 에서는 setState 메소드를 이용하여 여러가지를 한번에 변경 할 수도 있었지만, Hooks에서는 아닙니다.
      setWord(value);
      setValue('');
      setResult('Correct');
    } else {
      setValue('');
      setResult('Wrong');
    }

    input.current.focus(); // Cursor를 옮겨준다.
  }

  const _isRelayedWord = () => {
    let resultLastWord = word[word.length - 1],
      valueFirstWord = value[0];

    return resultLastWord === valueFirstWord;
  }

  const _onChange = (event) => {
    // state 변경은 각각 해줘야 합니다.
    // 기본 Class 에서는 setState 메소드를 이용하여 여러가지를 한번에 변경 할 수도 있었지만, Hooks에서는 아닙니다.
    setValue(event.target.value);
  };

  console.log('Rendering !!');

  return (
    <>
      <div>{word}</div>
      <form onSubmit={_onSubmit}>
        <input ref={input} onChange={_onChange} type='text' value={value}/>
        <button>Insert!</button>
      </form>
      <div>{result}</div>
    </>
  )

}

export default WordRelay;

 

client.jsx

import React from 'react';
import ReactDOM from 'react-dom';

import ClassApp from './word-relay'; // Class 사용
import HooksApp from './word-relay-hook'; // Hooks 사용

ReactDOM.render(<ClassApp />, document.getElementById('root')); // Class 사용
// ReactDOM.render(<HooksApp />, document.getElementById('root')); // Hooks 사용

 

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
    <!-- 웹팩으로 빌드한 ./dist/app.js 파일 -->
    <script src="./dist/app.js"></script>
  </body>
</html>

 

directory structure

 

기본적인 세팅은 저의 전 포스팅을 참고해주세요~

 

리액트 프로젝트 세팅

 

[React 구구단] React 프로젝트 셋팅

안녕하세요. 엄티 입니다. 이제부터 React를 사용해서 간단한 구구단 게임을 만들어 보겠습니다. 그전에 React를 사용하기 위한 간단한 프로젝트 세팅을 해보겠습니다. 참고로 제 포스팅 유명하신 '제로초'님 강좌..

eomtttttt-develop.tistory.com

 

저작자표시

'React JS' 카테고리의 다른 글

[React 숫자 야구] props 와 component 분리  (0) 2019.06.21
[React 끝말잇기] webpack-dev-server 및 react-hot-loader  (0) 2019.06.13
[React 구구단] React 구구단 웹 게임  (0) 2019.06.13
[React 구구단] React 프로젝트 셋팅  (0) 2019.06.13
React 다른 PORT로 연결  (0) 2018.12.11
'React JS' Related Articles more
Comments