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

Question

선생님의 구구단 코드를 리액트 컴포넌트에 넣어보고 있습니다! 자꾸 구구단을 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 > 이곳은 구구단 게임장입니다. < div > { gugudanState . first } 곱하기 { gugudanState . second } 는? < form onSubmit = { ( e ) => onSubmit ( e ) } > < input type = "number" value = { gugudanState . value } onChange = { ( e ) => onChange ( e ) } /> < button > 입력! < div > { gugudanState . result } < Link to = "/Game" className = "btn btn-light" > 이전으로 ); }; export default Multiplication ;

제로초(조현영) · Answer

e.preventDefault()를 주석처리(//)하셨는데 주석을 푸시면 됩니다.