리액트 새로고침 (구구단)

선생님의 구구단 코드를 리액트 컴포넌트에 넣어보고 있습니다!

자꾸 구구단을 submit하면 새로고침돼서 state 값이 사라집니다!

새로 고침이 안되게 바꿀 수 있는 방법이 있을까요ㅜㅜ?

import React, { Fragment, useState } from 'react';
import { Link } from 'react-router-dom';

const Multiplication = () => {
  const [gugudanState, setGugudanState] = useState({
    first: Math.ceil(Math.random() * 9),
    second: Math.ceil(Math.random() * 9),
    value: '',
    result: ''
  });
  const onChange = (e) => {
    setGugudanState({
      ...gugudanState,
      value: e.target.value
    })
  }
  const onSubmit = (e) => {
    //e.preventdefault();
    if (gugudanState.first * gugudanState.second === parseInt(gugudanState.value)) {
      setGugudanState({
        first: Math.ceil(Math.random() * 9),
        second: Math.ceil(Math.random() * 9),
        value: '',
        result: "정답입니다!"
      })
    } else {
      setGugudanState({
        ...gugudanState,
        value: "",
        result: "땡"
      })
    }
  }
  return (
    <Fragment>
      <h2>이곳은 구구단 게임장입니다.</h2>
      <div>{gugudanState.first} 곱하기 {gugudanState.second}는?</div>
      <form onSubmit={(e) => onSubmit(e)}>
        <input type="number" value={gugudanState.value} onChange={(e) => onChange(e)} />
        <button>입력!</button>
      </form>
      <div>{gugudanState.result}</div>
      <Link to="/Game" className="btn btn-light">
        이전으로
      </Link>
    </Fragment >
  );
};

export default Multiplication;

인프런 커뮤니티 질문&답변