묻고 답해요
129만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드팩토리] [중급] Flutter 진짜 실전! 상태관리, 캐시관리, Code Generation, GoRouter, 인증로직 등 중수가 되기 위한 필수 스킬들!
커스텀 텍스트 필드 onChanged 관련 질문
Ch2. Authentication (인증 시스템) - 간단한 로그인 시스템 만들어보기 수강 중입니다.커스텀 텍스트 필드의 onChanged 콜백을 통해LoginScreen의 id와 password에 인풋값을 할당해주는 코드에서 setState 함수를 쓰지 않아도 값이 할당되는 이유를 알고 싶습니다. setState는 콜백 실행후 다시 빌드하는것이고,setState를 쓰지 않으면 값만 갱신하는건가요?
-
해결됨웹 게임을 만들며 배우는 React
setTries를 하면 Cannot read properties of undefined (reading 'length') 에러가 뜹니다.
안녕하세요 제로초님. 항상 좋은 강의 감사드립니다. 유튜브로 강의 듣다가 3-8강에서 질문을 하기 위해 인프런 수강신청하여 질문 남깁니다. (유튜브는 질문댓글이 삭제되더라구요) 코드를 아래와 같이 작성하였는데, 리액트가 tries.length를 인식하지 못하는 현상이 발생합니다. tries 자체는 useState로 초기화해주었는데 tries.length의 length를 인식하지 못하는 이유가 무엇인가요? 문제 원인을 찾기 위해 setTries를 onChangeInput에 넣었을 때, 타이핑하자마자 바로 에러가 뜨는 걸로 봐선 tries를 setState할 때 에러가 발생하는 것 같은데 명확한 에러원인을 잘 모르겠습니다. 코드는 아래와 같습니다. https://github.com/kth990303/TH-s-Web/issues/1 https://github.com/kth990303/TH-s-Web/tree/master/react-webgame/baseball import React,{useState} from 'react'; import Try from './Try' const getNumbers=()=>{ const candidate=[1,2,3,4,5,6,7,8,9], ans=[]; for(let i=0;i<4;i++){ const chosen=candidate.splice(Math.floor(Math.random()*(9-i)), 1)[0]; ans.push(chosen); } return ans; } const NumberBaseball=()=>{ const [result, setResult]=useState(''); const [value, setValue]=useState(''); const [answer, setAnswer]=useState(getNumbers()); const [tries, setTries]=useState([]); const onSubmitForm=(e)=>{ e.preventDefault(); if(value===answer.join('')){ setResult('홈런!'); setTries((prevTries)=>{ [...prevTries, {try:value, result:'홈런!'}] }) } else{ const answerArray=value.split('').map((v)=>parseInt(v)); let strike=0, ball=0; if(tries.length>=9){ setResult(`10번 넘게 틀려서 실패! 답은 ${answer.join(',')}였습니다!`); alert('게임을 다시 시작합니다.'); setValue(''); setAnswer(getNumbers()); setTries([]); } else{ for(let i=0;i<4;i++){ if(answerArray[i]===answer[i]){ strike++; } else if(answer.includes(answerArray[i])){ ball++; } } setTries((prevTries)=>{ [...prevTries, {try: value, result:`${strike}스트라이크 ${ball}볼입니다.`}] }) setValue(''); } } } const onChangeInput=(e)=>{ console.log(tries.length); 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={`${i+1}차 시도: ${v.try}`} tryInfo={v} /> ); })} </ul> </> ) } export default NumberBaseball; 감사합니다!