무료
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결웹 게임을 만들며 배우는 React
안녕하세요 Hook에서 렌더링 질문있습니다.
hook에서 다음과 같은 코드로 렌더링을 몇번 발생하는지 확인해 보았습니다. 첫번째 코드 function App () { const [one, setOne] = useState(0); const [two, setTwo] = useState(0); useEffect(()=>{ setOne(prev => prev + 1); setTwo(prev => prev + 1); }, []); console.log('렌더링!'); return ( <> {one}{two} </> ); } 두번째 코드 function App () { const [one, setOne] = useState(0); const [two, setTwo] = useState(0); useEffect(()=>{ setTimeout(()=>{ setOne(prev => prev + 1); setTwo(prev => prev + 1); }, 1000); }, []); console.log('렌더링!'); return ( <> {one}{two} </> ); 브라우저 콘솔을 확인한 결과, 첫번째 코드는 렌더링이 2번, 두번째 코드는 렌더링이 3번 발생했습니다. 초기 렌더링을 제외하면, 첫번째 코드에서는 react가 setOne과 setTwo를 한번에 처리해줘서 추가적으로 렌더링이 1번 발생한 것 같고, 두번째 코드에서는 react가 setOne과 setTwo를 각각 따로 한번씩 처리해줘서 렌더링이 2번 발생한 것 같은데... 첫번째와 두번째 각각 왜 이러한 현상이 발생하는 건지 궁금합니다..ㅠㅠ
- 미해결웹 게임을 만들며 배우는 React
로또 질문있습니다.
안녕하세요 제로초님! function getWinNumbers() { console.log("getWinNumbers"); const candidate = Array(45) .fill() .map((v, i) => i + 1); const shuffle = []; while (candidate.length > 0) { shuffle.push( candidate.splice(Math.floor(Math.random() * candidate.length), 1)[0] ); } const bonusNumber = shuffle[shuffle.length - 1]; const winNumbers = shuffle.slice(0, 6).sort((p, c) => p - c); console.log("winNumbers1:", winNumbers); return [...winNumbers, bonusNumber]; } const Memo = () => { const lottoNumbers = useMemo(() => getWinNumbers(), []); const [winNumbers, setWinNumbers] = useState(lottoNumbers); const [winBalls, setWinBalls] = useState([]); const [bonus, setBonus] = useState(null); const [redo, setRedo] = useState(false); const timeouts = useRef([]); console.log("winNumbers2:", winNumbers); console.log("winBalls:", winBalls); useEffect(() => { console.log("useEffect"); for (let i = 0; i < winNumbers.length - 1; i++) { timeouts.current[i] = setTimeout(() => { setWinBalls((prevBalls) => [...prevBalls, winNumbers[i]]); }, (i + 1) * 1000); } timeouts.current[6] = setTimeout(() => { setBonus(winNumbers[6]); setRedo(true); }, 7000); return () => { timeouts.current.forEach((v) => { clearTimeout(v); }); }; }, [timeouts.current]); // 빈 배열이면 componentDidMount와 동일 // 배열에 요소가 있으면 componentDidMount랑 componentDidUpdate 둘 다 수행 useEffect(() => { console.log("로또 숫자를 생성합니다."); }, [winNumbers]); const onClickRedo = useCallback(() => { console.log("onClickRedo"); console.log(winNumbers); setWinNumbers(getWinNumbers()); setWinBalls([]); setBonus(null); setRedo(false); timeouts.current = []; }, [winNumbers]); 강좌와 같은 코드에서 getwinNumbers 함수안에서 winNumbers의 값을(winNumbers1) 콘솔로 한번 찍고 function getWinNumbers() { ...... console.log("winNumbers1:", winNumbers); return [...winNumbers, bonusNumber]; } 이번에는 Memo 안에서 winNumbers를 (winNumbers2)콘솔로 찍어보고 const Memo = () => { const lottoNumbers = useMemo(() => getWinNumbers(), []); const [winNumbers, setWinNumbers] = useState(lottoNumbers); const [winBalls, setWinBalls] = useState([]); const [bonus, setBonus] = useState(null); const [redo, setRedo] = useState(false); const timeouts = useRef([]); console.log("winNumbers2:", winNumbers); console.log("winBalls:", winBalls); 브라우저를 실행하면 이와같이 winNumbebrs1과 2가가 처음에는 두개의 콘솔 모두 같은 값이었다가 useEffect가 실행되고 나서 값이 바뀝니다. 이런 현상은 초기 렌더링이거나 새로고침을 하면 똑같이 일어납니다. 하지만 onClickRedo한번더를 누르면 그제서야 winNumbers의 값이 같게 나옵니다. 왜 처음렌더링하거나 새로고침시 값이 다르게 나오는지 궁급하니다!. 2. 강의 5-2 에서 componenetDidMount () { const {imageCord} = this.state this.interval = setInterval( () => { console.log("hello", this state.imageCord, rspCoords,가위) if (imageCord === repCoords.바위) ....... } } 이코드에서 비동기 함수 바깥에 있는 변수 imgeCord를 참조해서 클로져 에러가 발생한다고 하셨잖아요? const Memo = () => { const lottoNumbers = useMemo(() => getWinNumbers(), []); const [winNumbers, setWinNumbers] = useState(lottoNumbers); const [winBalls, setWinBalls] = useState([]); const [bonus, setBonus] = useState(null); const [redo, setRedo] = useState(false); const timeouts = useRef([]); useEffect(() => { console.log("useEffect"); for (let i = 0; i < winNumbers.length - 1; i++) { timeouts.current[i] = setTimeout(() => { setWinBalls((prevBalls) => [...prevBalls, winNumbers[i]]); }, (i + 1) * 1000); } 그런데 이코드에서 setTimeout 비동기 함수에서 winNumbers와 timeouts도 useState에 있는 변수?(상수)인데 이때는 왜 클로져 문제가 발생하지 않는지 궁금합니다!
- 미해결웹 게임을 만들며 배우는 React
안녕하세요 setState 관련 질문입니다.
강의를 보고 setState를 이것 저것 해보는 와중에 이해가 안되는 부분이 생겨 여쭤봅니다. input 박스에 입력할 때, 최초 입력 할 땐 맨앞에 공백을 추가 해서 setState 를 하고 그 이후에는 입력한값으로만 setState 하려 하는데, 한글이 중복으로 입력 되는 상황이 발생 합니다. 예를들어 "가" 를 입력한다면 1) " ㄱ" 2) " 가" 를 예상하는데, 실제로는 1) " ㄱ" 2) " ㄱ가" 가 출력 됩니다... 코드도 첨부합니다. import "./App.css"; import { useEffect, useRef, useState } from "react"; function App() { const [inputVal, setInputVal] = useState(""); const ref = useRef(inputVal); const handleChange = (e) => { if (ref.current.length === 0) { setInputVal(" " + e.target.value); } else { setInputVal(e.target.value); } }; useEffect(() => { ref.current = inputVal; }, [inputVal]); return ( <div className="App"> <input value={inputVal} onChange={handleChange} /> </div> ); } export default App; 이유를 알 수 있을까요?
- 미해결웹 게임을 만들며 배우는 React
안녕하세요 비동기 질문있습니다
const onClickTd = useCallback( () => { dispatch({type: CLICK_CLEE, row: rowIndex, cell: cellIndex}); 1번째 비동기 dispatch({type: CHANGE_TURN}); 2번째 비동기 } 비동기 실행순서에 질문이 있습니다. 동기처리가 끝나고 비동기코드들이 실행될 때 task queue에 1번째 비동기가 들어가서 끝나고 2번째 비동기 실행되는게 맞나요?
- 미해결웹 게임을 만들며 배우는 React
안녕하세요 코드 질문이요
tictacto 컴포넌트 const reducer = (state, action) => { switch (action.type) { case CLICK_CELL: { const tableData = [...state.tableData]; tableData[action.rowIndex] = [...tableData[action.rowIndex]]; tableData[action.rowIndex][action.cellIndex] = state.turn; return { ...state, tableData, }; } case CHANGE_TURN: { return { ...state, turn: state.turn === "O" ? "X" : "O", }; } case CHECK_WINNER: { const { tableData, turn } = state; if ( tableData[action.row][0] === turn && tableData[action.row][1] === turn && tableData[action.row][2] === turn ) { return { ...state, winner: turn }; } if ( tableData[0][action.cell] === turn && tableData[1][action.cell] === turn && tableData[2][action.cell] === turn ) { return { ...state, winner: turn }; } if ( tableData[0][0] === turn && tableData[1][1] === turn && tableData[2][0] === turn ) { return { ...state, winner: turn }; } if ( tableData[0][2] === turn && tableData[1][1] === turn && tableData[2][0] === turn ) { return { ...state, winner: turn }; } } } }; td 컴포넌트 에서는 dispatch({ type: CHECK_WINNER, row: rowIndex, cell: cellIndex }); 이런식으로 주고 승자 판단을 해봤는데요. 이렇게 해도 크게 문제가 없는건가요?
- 미해결웹 게임을 만들며 배우는 React
이미 열었던 셀 체크를 할 때 CODE.OPENED 로 0인지 검사하는게 아니라 0 이상인지 검사하면 더 좋은 것이 아닌지 궁금합니다.
안녕하세요, 제로초님. 강의 내용이 너무 쏙쏙 들어와서 재밌게 공부하고 있습니다. 궁금한 부분이 checkAround() 함수의 초반 검사부, 그리고 주변 칸을 여는 near checkAround를 실행할때에 열린칸인지 아닌지 검사하는 부분에서 어떠한 칸을 클릭했을때에 그 옆에 칸이 지뢰가 없는 빈칸이지만 이미 클릭했는데 주변에 지뢰가 있어서 숫자가 입력된 칸인 경우 checkAround가 다시 실행되면 안되므로 CODE.OPENED 인지 아닌지가 아니라 >= 0 인지 아닌지로 구분하는 것이 더 좋지 않은가 하여 질문드립니다. 강의에 나온 조건문을 보던 중 지뢰찾기 강의 초반에 0 이상이면 다 OPENED로 나중에 사용할 예정이라고 하셨는데 이 때가 등장할 때가 아닌가 싶었습니다!
- 미해결웹 게임을 만들며 배우는 React
react dev Tools 오류
다음과 같이 떠서 코드를 볼수가 없습니다. 혹시 어떤 문제 인지 알수 있으실까요 ??
- 미해결웹 게임을 만들며 배우는 React
22년3월4일 기준 강의 내용을 그대로 따라하면 정상적으로 실행됩니다.
여러분들도 포기하지말고 여기 파트 그냥 넘어가지 마시고 꼭 오류 나더라도 제로초님 강의따라서 코드따라 쳐보시고 커맨드라인으로 npx webpack 한 후에 html파일 꼭 크롬에 띄워서 확인 해보시길 바랍니다~! 저도 이걸 왜 해야 하나 처음엔 생각했지만 구동 원리를 조금은 엿볼수 있어서 좋았습니다. 꼭 꼭 해보세요~!
- 미해결웹 게임을 만들며 배우는 React
reducer 관련 질문입니다.
reducer 함수에서 action 타입에 따라 return 하는 부분에서 아래와 같이 쓰셨는데, (OPEN_CELL return 부분입니다.) OPEN_CELL 내부에서 state 내부의 데이터와 이름이 같은 변수가 선언되었을 경우 return 할 때 생략된 형태로 쓸 수 있는 건가요? 예를 들면, OPEN_CELL에서 let halted = false; 가 쓰였고 state의 halted와 이름이 같음으로 halted: halted, 가 halted, 로 쓰인다고 생각했습니다. 그리고 return 하는 데이터의 순서는 상관없나요? return { ...state, tableData, openedCount: state.openedCount + openedCount, halted, result, };
- 미해결웹 게임을 만들며 배우는 React
렌더링 질문이요
6:46초에서 리액트가 렌더링을 하는 기준이 예전 state랑 현재 state랑 다르면 렌더링을 한다고 하셨는데요. 예전에 비슷한 질문을 올렸을 때 setState만 실행되어도 리렌더링이 된다고하셨는데 그러면 setState({})안에서 state가 값이 바뀌지 않으면 렌더링 안하는건가요? 어떤게 맞는지 모르겠어요..
- 미해결웹 게임을 만들며 배우는 React
Cannot read properties of undefined
안녕하세요 선생님 강의 감사히 잘 듣고 있습니다. 지뢰 찾기를 구현하다가 자꾸 에러가 떠서 문의드립니다. context API 를 하는 부분에서 무언가 문제가 생긴것 같습니다. 'Cannot read properties of undefined (reading 'length')' 에러가 뜨는데, 지뢰찾기 메인 jsx 파일에서 tableData를 받아와서 length로 배열 안의 갯수를 읽는 것에 실패한 걸로 보입니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 import React, {useContext, memo} from 'react' import Tr from './Tr' import {TableContext} from './MineSweeper' const Table = memo(() => { const {tableData} = useContext(TableContext); return( <table> {Array(tableData.length).fill().map((tr, i) => <Tr rowIndex={i}/>)} </table> ) }); export default Table; Colored by Color Scripter cs 그래서 그냥 && 을 이용하여 이 에러를 해결하면 또 다른 아래의 에러로 연결이 됩니다. Cannot set properties of undefined (setting 'NaN') 이 에러는 메인 파일의 PlantMine 함수와 Reducer 부분에 이런 문제가 있다고 하는데, 선생님 코드랑 한 줄 한 줄 비교해 가며 똑같이 만들었는데, 이상하네요. 어떤 식으로 해결해 보는게 좋을까요? 감사합니다.
- 미해결웹 게임을 만들며 배우는 React
안녕하세요 map질문이요
9:55초 내용에서 ['사과','바나나','포도','귤','감','배','밤].map( (v) => { return ( <li>{v}</li> ) map함수가 return값들을 모아서 배열로 만들어주는 것으로 알고있는데요. <ul>{[map배열]}</ul> 이렇게 되어있는거 같은데 어떻게 배열안에 값들을 호출안했는데 차례대로 나올수 있는건가요? 그리고 map이 값을 모아서 새로운 배열을 return해주면 그 배열을 받을 변수가 필요하지않나요?
- 미해결웹 게임을 만들며 배우는 React
새 게임마다 환경설정
새로운 게임 하나씩 더 만들때마다 작업설정은 처음 webpack 사용해서 게임 만들때처럼 하나하나 다 설치하고 npm run dev로 서버 띄우는 건가용??
- 미해결웹 게임을 만들며 배우는 React
this.setState()에 의한 렌더링 질문이요
안녕하세요, this.setState()가 실행되면 렌더링이 된다고 하셨는데, this.setState()가 실행만 되어도 렌더링이 되는건가요? 아니면 this.setState()가 실행되고 this.state = {}에서의 객체가 변경되어야 실행되는건가요? 만약 후자가 맞다면this.state={}에서의 객체가 변경안되면 렌더링은 안되는건가요?
- 해결됨웹 게임을 만들며 배우는 React
끝말잇기 useRef / useState 사용 관련
안녕하세요. 안보고 다시 만들어보다가 강의보면서 만든 코드와 비교해보니 궁금한 점이 있어 질문 올립니다. 저는 useState로 value를 따로 지정하지 않고 모든것을 useRef를 이용해서 만들었는데, useRef랑 useState를 섞어서 사용했더라구요. 굳이 섞어서 안쓰고 이렇게 useRef 하나로만 코드를 작성해도 괜찮은가요? 어떤건 ref로 쓰고, 어떤건 state를 쓴 이유는 길이 때문인건지 아니면 다른 이유가 있나요?
- 미해결웹 게임을 만들며 배우는 React
input 에 값이 변경될때마다 getNumber가 호출되는게 정상인지요?
아무리 해봐도 현상제거가 안되는데요. 테스트 해보니깐 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> </> ); }
- 미해결웹 게임을 만들며 배우는 React
npm i 시 webpack-cli 오류에 대해서 질문 드립니다.
요즘 강의 코드를 다시 복습해볼려고 보고 있는데 깃에 있는 코드를 npm i 진행 후 npm run dev를 하면 아래 사진과 같은 에러가 발생합니다. (반응속도 강의체크뿐만이 아닌 다른 강의도 동일한 현상이드라구요.) 깃 webpack-cli 버전 : 4.1.0 최신 webpack-cli 버전 : 4.9.1 이렇게 최신 버전 설치로 정상 실행을 하긴 했는데 그냥 삭제 후 최신 버전 설치로 찍어 맞춘거라 정확한 원인 파익을 하지 못했습니다. 제 구글링 실력으로는 webpack 깃이나 블로그에서 원인과 관련된 내용을 찾지 못했는데 이런 경우 어떻게 찾아봐야하는지 팁이 있을까요??
- 미해결웹 게임을 만들며 배우는 React
eslint? 빨간줄이 안생겨요
강의를 듣다가 우연히 저는 eslint 가 실행이 안되는(?)것 같아 질문드립니다. 제 것엔 왜 빨간 밑줄이 그어지지 않을까요?eslint 는 그냥 vscode 확장프로그램으로 깔았습니다.
- 미해결웹 게임을 만들며 배우는 React
Try.jsx 에 PureComponent 와 React.memo 둘 다 적용해도 이전과 똑같이 렌더링 표시가 뜹니다.
import React, { memo } from "react"; const Try = memo(({ tryInfo }) => { return ( <li> <div>{tryInfo.try}</div> <div>{tryInfo.result}</div> </li> ) }); export default Try; import React, { PureComponent } from "react"; class Try extends PureComponent { render() { const { tryInfo } = this.props; return ( <li> <div>{tryInfo.try}</div> <div>{tryInfo.result}</div> </li> ); } } export default Try; 항상 영상 잘 보고있습니다.! 답변주시면 감사하겠습니다
- 미해결웹 게임을 만들며 배우는 React
useRef
강의를 보다 궁금한 점이 있어서 질문드립니다~ useRef를 생성 하실 때 초기값으로 null응 넣어 주실 때와 안 넣어 주실 때가 있으신데 차이가 있나요?? setTimeoute은 null로 초기화 해주셨는데 startTime하고 endTime은 그냥 useRef()이렇게 생성해 주셔서 어떤 차이가 있는지 궁금합니다