React 에 Typescript 적용하기(3)

구구단 구현

import * as React from 'react';
import { useState, useRef } from 'react';

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

  const inputEl = useRef<HTMLInputElement>(null);

  const onSubmitForm = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    const input = inputEl.current;
    if(parseInt(value) === first * second){
      setResult('정답');
      setFirst(Math.ceil(Math.random() * 9));
      setSecond(Math.ceil(Math.random() * 9));
      setValue('');
      if(input){
        input.focus();
      }
    } else {
      setResult('땡');
      setValue('');
      if(input){
        input.focus();
      }
    }
  }

  const onChangeValue = (e:React.ChangeEvent<HTMLInputElement>) => setValue(e.target.value);

  return (
    <>
      <div>{first} 곱하기 {second}</div>
      <form onSubmit={onSubmitForm}>
        <input type="number" ref={inputEl} value={value} onChange={onChangeValue} />
      </form>
      <div>{result}</div>
    </>
  );
}

export default GuGuDan;

useRef의 경우 generator에 해당 element를 입력

이벤트의 경우 콜백함수의 인수인 e의 타입은 React.해당이벤트<해당 element> 로 한다.

useRef로 가져온 element의 타입은 해당 엘리먼트 또는 useRef의 파라메터값이 될수 있기때문에 if문으로 처리해주었다.