-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
input 에 값이 변경될때마다 getNumber가 호출되는게 정상인지요?
22.01.24 13:12 작성 조회수 202
0
아무리 해봐도 현상제거가 안되는데요.
테스트 해보니깐 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}</h1>
<form onSubmit={onSubmitForm}>
<input maxLength={4} value={value} onChange={onChangeInput} />
<button>입력</button>
</form>
<div>시도 : {tries.length}</div>
<ul>
{
tries.map((v,i)=>{
return (
<Try key={v+'0'+i} tryInfo={v} index={i}></Try>
);
})
}
</ul>
</>
);
}
답변을 작성해보세요.
1
조현영
지식공유자2022.01.24
네 getNumbers()가 매번 실행되는 게 맞습니다. 이 문제는 나중에 useMemo를 써서 해결하고요. 다만 getNumbers()가 매번 실행되어도 state에는 영향을 주지 못합니다.
답변 1