React 구구단 게임 만들기 [함수형 컴포넌트]

 

const Gugudan = () => {
  const [first, setFirst] = React.useState(Math.ceil(Math.random() * 9));
  const [second, setSecond] = React.useState(Math.ceil(Math.random() * 9));
  const [value, setValue] = React.useState('');
  const [result, setResult] = React.useState('');
  const inputRef = React.useRef(null);

  const onSubmitForm = (e) => {
    e.preventDefault();
    if(parseInt(value) === first * second) {
      setResult(`정답: ${value}`);
      setFirst(Math.ceil(Math.random() * 9));
      setSecond(Math.ceil(Math.random() * 9));
      setValue('');
      inputRef.current.focus();
    } else {
      setResult('땡');
      setValue('');
      inputRef.current.focus();
    }
  }

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

  return (
    <React.Fragment>
      <p>{first} 곱하기 {second} 는?</p>
      <form onSubmit={onSubmitForm}>
        <input type="number" ref={inputRef} value={value} onChange={onChangeInput} />
        <button type="submit">입력</button>
      </form>
      <p>{result}</p>
    </React.Fragment>
  );
 }
 
 ReactDOM.createRoot(document.querySelector('#root')).render(<Gugudan />);

 

state 선언

first = 곱할 첫번째 랜덤 숫자

second = 곱할 두번째 랜덤 숫자

value = input value

result = 정답을 알려주는 텍스트

inputRef = input의 DOM에 접근 (ref = DOM에 직접 접근할때 사용하는 속성)

 

onSubmit 함수 - 정답일 경우

e.preventDefault(); = 기본이벤트인 submit 막기

if(parseInt(value) === first * second) = 사용자가 입력한 value와 정답이 같을 경우

setResult(`정답: ${value}`); = 정답 텍스트, 정답 숫자

setFirst(Math.ceil(Math.random() * 9)); = 첫번째 랜덤 숫자 재생성
setSecond(Math.ceil(Math.random() * 9)); = 두번째 랜덤 숫자 재생성

setValue(''); = 사용자가 입력한 value 값 초기화

inputRef.current.focus(); = input에 focus

 

onSubmit 함수 - 틀렸을 경우

setResult('땡'); = 땡 텍스트
setValue(''); = 사용자가 입력한 value 값 초기화

inputRef.current.focus(); = input에 focus

 

onChangeInput 함수 - 사용자가 입력한 value 값을 state value에 넣기

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

 

가상의 묶어주는 태그 = <React.Fragment>

 

최상위 #root에 Gugudan 컴포넌트 추가
 ReactDOM.createRoot(document.querySelector('#root')).render(<Gugudan />);