[2022.07.09] 주간 복습 (끝말잇기 다시 만들어보기)

간단한 끝말잇기 게임 다시 만들어보기

함수 컴포넌트로 만든 심플 끝말잇기

import './App.css';
import WordRelay from './WordRelay';

function App() {
  return (
    <div className="App">
      <WordRelay />
    </div>
  );
}

export default App;

wordrelay 컴포넌트 jsx 전체 코드

import React, { useState, useRef } from 'react';
import wordrelay from './wordrelay.css';

function WordRelay() {
  const [word, setWord] = useState('은하');
  const [userInput, setUserInput] = useState('');
  const [result, setResult] = useState('');
  const inputRef = useRef(null);

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

  const relayBtnClick = () => {
    if (userInput[0] === word[word.length - 1]) {
      setResult('SUCCESS💜 다음 단어로 이어보세요!');
      setWord(userInput);
      setUserInput('');
    } else {
      setResult('RETRY😥 단어를 다시 확인해보세요. ');
      setUserInput('');
    }
    inputRef.current.focus();
  };

  return (
    <>
      <div className="word-container">
        <h2 className="title">끝말잇기 게임</h2>
        <p className="current-word">현재 단어 : {word}</p>
        <input ref={inputRef} placeholder="단어를 입력하세요." type="text" value={userInput} onChange={userInputChange} />
        <button onClick={relayBtnClick}>끝말잇기🎵</button>
      </div>
      <p className="result-word">{result}</p>
    </>
  );
}

export default WordRelay;

useRef 사용 방법도 이제 손에 익은 것 같다! ㅎㅎ
기본기를 탄탄하게 쌓아야 다음 것을 배워도 개념이 날아다니지 않고 차곡차곡 잘 쌓일 것 같아서 매주 배운 내용을 다시 복습하는 시간을 가지고 있다.

CRA 없이 만들어보려고 했는데 웹팩 사용방법은 아직 어려워서 CRA 사용해서 만든건 좀 아쉽다..ㅜㅜ
조금씩 다시 도전해봐야지.........