input 에 값이 변경될때마다 getNumber가 호출되는게 정상인지요?

Question

아무리 해봐도 현상제거가 안되는데요. 테스트 해보니깐 value이 변경되면 야구 jsx가 맨처음부터 수행되어 지는것 같습니다. 제가 놓친 부분이나 잘못 알고 있는게 있을까요? function getNumbers (){ const candidates = [ 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 ]; const array =[]; for ( let i = 0 ; i < 4 ; i ++){ const chose = candidates . splice ( Math . floor ( Math . random ()*( 9 - i )), 1 )[ 0 ]; array . push ( chose ); } console . log ( '답은 : ' , array . join ( '' )); return array ; }; const BaseBall = () => { const [ result , setResult ] = useState ( '' ); const [ value , setValue ] = useState ( '' ); const [ answer , setAnswer ] = useState ( getNumbers ()); const [ tries , setTries ] = useState ([]); const onSubmitForm = ( e ) => { debugger ; e . preventDefault (); if ( value === answer . join ( '' )){ setResult ( '홈런' ); setTries (( prevTries ) => { return [... prevTries ,{ try : value , result : '홈런' }]; }) alert ( '게임을 다시 시작합니다.!' ) setValue ( '' ); setAnswer ( getNumbers ()); setTries ([]); } else { const valueArray = value . split ( '' ). map ( v => parseInt ( v )); let strike = 0 ; let ball = 0 ; if ( tries . length >= 9 ){ setResult ( `10번 틀려서 실패! 답은 ${ answer . join ( ',' ) } ` ); alert ( '게임을 다시 시작합니다' ); setAnswer ( getNumbers ()); setValue ( '' ); setTries ([]); } else { for ( let i = 0 ; i < 4 ; i ++){ if ( valueArray [ i ] === answer [ i ]){ strike += 1 ; } else if ( answer . includes ( valueArray [ i ])){ ball += 1 ; } } setTries (( prevTries ) => { return [... prevTries , { try : value , result : `strkie : ${ strike } , ball : ${ ball } ` }]; }) setValue ( '' ); } } }; const onChangeInput = ( e ) => { setValue ( e . target . value ); }; return ( <> < h1 > { result } < form onSubmit = { onSubmitForm } > < input maxLength = { 4 } value = { value } onChange = { onChangeInput } /> < button > 입력 < div > 시도 : { tries . length } < ul > { tries . map (( v , i ) => { return ( < Try key = { v + '0' + i } tryInfo = { v } index = { i } > ); }) } ); }

제로초(조현영) · Answer

네 getNumbers()가 매번 실행되는 게 맞습니다. 이 문제는 나중에 useMemo를 써서 해결하고요. 다만 getNumbers()가 매번 실행되어도 state에는 영향을 주지 못합니다.