무료
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결웹 게임을 만들며 배우는 React
createContext 초깃값
초깃값을 넣어주지 않아도 정상동장하는데 , 넣어주는 이유는 무엇인가요?
- 미해결웹 게임을 만들며 배우는 React
자식이 없는 ul 렌더링
안녕하세요 제로초님.<ul> {tries.map((t) => <Try key={} ... />)} </ul>만약 tries.length === 0 인 상태에서ul은 자식이 없는 상태로 화면에 렌더링 되는데ul이 렌더링 되지않게 하는 방법도 있나요?{ !!tries.length && <ul>{tries.map(...)}</ul> }위 방법이나 여러 방법으로 해봐도 오류 발생하네요ㅠㅠ vue에서는 ul에 v-if로 제어가 가능한데리액트에서도 비슷한 방법이 있는지 궁금합니다.
- 미해결웹 게임을 만들며 배우는 React
함수가 바뀐다는 말의 의미
함수가 바뀐다는 말의 의미가 함수(changeHand) 내부에 있는 imgCoord 같은 변수가 참조하는 값이 바뀔 때를 의미하는 건가요?
- 미해결웹 게임을 만들며 배우는 React
생성자 함수변경
안녕하세요 제로초님constructor 생성자 함수로 초반에 state값을 설정하셨었는데왜 8분대부터는 그냥 state를 직접 state = {liked : false}로 설정하셨는지 이유가 궁금합니다
- 미해결웹 게임을 만들며 배우는 React
useEffect 부분 질문 있습니다.
useEffect(() => { // componentDidMount, componentDidUpdate 역할 interval.current = setInterval(changeHand, 100); ----> 1번 코드 return () => { // componentWillUnmount 역할 clearInterval(interval.current); ----> 2번 코드 } }, [imgCoord]);위 코드에서 조금 찝찝한 부분이 있어서 질문(Q1, Q2, Q3) 드립니다.처음 RSP 함수 컴포넌트 코드가 실행되고 컴포넌트가 생성되면, 1번 코드가 실행됨0.1초 후 changeHand 함수가 실행돼서 state가 바뀜state 의 변화로 RSP 함수 컴포넌트 코드가 재실행되기 전에 2번 코드가 실행된 후 기존 RSP 컴포넌트가 소멸됨함수 컴포넌트 코드가 재실행되면서 컴포넌트가 생성되면, 1번 코드가 다시 실행됨 === (1번 과정)(2번 과정으로 다시 반복)Q1. 그러면 componentDidMount 랑 componentWillUnmount 인 상황만 반복될 뿐, class 컴포넌트 라이프사이클에서의 componentDidUpdate 와 동일한 역할을 하는 상황은 Hooks에서는 만들어지지 않는 건가요?Q2. 강의 설명에 '두 번째 인수 배열에 넣은 값(예제에서는 imgCoord)들이 바뀔 때 useEffect가 실행됨' 이라고 나와있는데, 처음 컴포넌트가 생성되었을 때 useEffect의 componentDidMount가 실행되는 것을 보면 두 번째 인수 배열에 넣은 값들이 바뀌지 않아도 useEffect는 반드시 실행되어야 하는 것 아닌가요?또한 class 컴포넌트에서는 비동기 함수 외부에서 선언한 변수를 함수 내부에서 사용할 때 함수 내부의 변수의 참조값이 변하지 않는 문제가 생겼었는데, 함수 내부에 변수를 선언해 줌으로써 해결했던 걸로 기억합니다.Q3. 여기서도 마찬가지로 useEffect의 두 번째 인수 배열은 외부에서 선언한 변수를 useEffect 함수 내부로 가져와서 참조관계를 그때그때 바꾸기 위한 용도로 사용된 것 아닌가요?
- 미해결웹 게임을 만들며 배우는 React
숫자야구게임 - alert가 rendering을 방해하는 것 같습니다...
선생님 안녕하세요. 숫자 야구 코드를 작성하고 테스트 해보는데, 제 브라우저가 문제인지, 아니면 실제로 이렇게 작동하는 게 맞는건지 의문이 들어 사진과 함께 질문 드립니다. 우선은 작성한 코드입니다. 순서나 오타가 없음을 확인하였습니다. 그런데 만약에 10번 틀릴 때 alert가 발생하기 전에, setState가 되고 "10번 넘게 틀려서 실패! 답은 ...입니다." 하고 renderig이 되기 전에 alert가 먼저 띄어집니다. 제 생각엔 원래라면 먼저 틀렸음과 함께 정답이 띄워지고 난 후에 alert가 나타나고 alert를 체크하면 setState가 다시 되어서 게임이 다시 reset되어야 될 것 같은데, alert가 먼저 나타나고 그 이후에 render가 진행되는 것 같습니다. 비동기적인 문제일까요? 아니면 alert의 알림 설정이 제 브라우저 내에서 이상하게 설정되어 있는 걸까요? 다음은 사진입니다. render가 브라우저에 나타나기 전에 alert가 발생하구요, alert를 확인 누르면 다음과 같이 됩니다. 혹시 이렇게 동작하는 것이 원래 맞는지... 아니면 무슨 문제가 있는 건지 정확히 잘 모르겠습니다. 우선 코드는 정확히 오타나 순서 변경 없이 동일함을 확인하였습니다.
- 미해결웹 게임을 만들며 배우는 React
useRef 관련 질문 있습니다.
useRef와 useState의 차이는 화면 상의 리렌더링이 되냐 안되냐의 차이로 알고 있습니다. 하지만 useState로 interval을 설정해도 잘 되어서 왜 useRef를 쓰신것인지 궁금해서 여쭤봅니다!
- 미해결웹 게임을 만들며 배우는 React
npx webpack cli에 대해 질문합니다
안녕하세요 기본강좌 webpack설치하기 를 시청하면서 따라하고 있는데 밑에 첫번째 오류가 뜹니다 npm run dev를 해도 에러가 뜹니다 ㅜㅜ.. devServer: { devMiddleware: { publicPath: '/dist' }, static: { directory: path.resolve(__dirname) }, hot: true 도 넣어봤는데 효과가 없는 것 같습니다 ㅜ!
- 미해결웹 게임을 만들며 배우는 React
useMemo와 useRef 차이
useMemo는 복잡한 합수 결과값을 기억하고 useRef는 일반 값을 기억한다고 하셨는데 둘의 동작방식의 차이가 있나요? useRef로 해도 동일하게 작동은 할 것 같은데 useMemo로 해야하는 이유가 궁금합니다!
- 미해결웹 게임을 만들며 배우는 React
이벤트리스너
근데 이렇게 ms 단위로 측정을 하면 실제 클릭 ~ onClick 함수 실행 까지의 오차가 생길 수도 있나요? 생긴다면 얼마나 될까요?
- 미해결웹 게임을 만들며 배우는 React
html자동완성이 안되요 ㅠ
setting.json에 이거 추가하면 된다고들 하는데 이게 html파일이여서 안되는건가요? ㅠㅠ
- 미해결웹 게임을 만들며 배우는 React
22년 예정 강좌질문
안녕하세요. 제로초님 항상 잘보고 있습니다. 저한테 제로초님이 잘 맞는다고 생각하여, 새로운 기능들을 배울때 제로초님 강의를 많이 참고 합니다. 우선 질문할 내용이 강의내용과는 별도의 내용인점 죄송합니다. 리액트를 다보고, 리덕스랑 NEXT도 공부하려 하는데, 이전 노드버드 강좌는 리덕스 툴킷 이전이고 NEXT도 9버전이라, 고민하고 있습니다. 1. 올초 유튜브에서 22년에 노드버드 리뉴얼 계획이 있으시다 했는데 아직까지 별다른 소식이 없어서 진행되는게 맞는지, 2. 또한 NEXT랑 리덕스랑 잘 맞지 않는다고 하여 리덕스말고 다른것을 써서 리뉴얼 할 계획이라 하셨는데 노드버드 리뉴얼 하게 된다면 리덕스 없이 하는지 궁금합니다. 3. 마지막으로 지금 노드버드 강의를 구매하면 , 나중에 리뉴얼 된 업데이트 강의도 볼 수 있는 구조인가요?
- 미해결웹 게임을 만들며 배우는 React
onClickRedo함수
onClickRedo = () =>{ this.setState({ winNumbers: getWinNumbers(), winBalls: [], bonus: null, redo: false, }) this.timeouts = []; } 이렇게 초기화 작업 코드를 작성하는데 첫 랜더링때 timeouts[]에 담는 setTimeout()을 클리어하는 clearTimeout()을 초기화 작업에서는 안하는데 예를들어 "한 번더" 버튼을 많이 클릭할 경우에 문제가 없는지 궁금합니다. 없다면 왜 그런지 궁금합니다. 혹시 아니면 Lotto컴포넌트가 삭제된게 아니기 때문에 clearTimeout()을 따로 처리 안 하는건가요? 삭제 될때만 clear처리해주면 되나요?
- 미해결웹 게임을 만들며 배우는 React
Ball에서 콘솔을 찍어보면 리렌더링 될 때마다 2번씩 찍혀요
1. Ball 컴포넌트 안에서 콘솔로 "ball"을 찍어보면 로또번호가 하나씩 나올 떄마다 2번씩 찍히는데 왜 2번씩 찍히는 지 이해가 안가요 제 생각엔 Lotto컴포넌트 useEffect 안 for문에서 setWinBalls을 해줄때에만 리렌더링이 된다고 생각해서 한 번만 찍힐 거 같은데 제가 잘 못 이해한건가요? 2. Ball 컴포넌트에서 memo를 지우고 실행해보면첫번째 로또번호 나옴 -> ball, ball (2번찍힘) 두번째 로또번호 나옴 -> ball, ball, ball, ball (4번찍힘) ... 왜 이렇게 배로 리렌더링이 되는건가요 ㅠㅠ?
- 미해결웹 게임을 만들며 배우는 React
useMemo 질문드립니다.
useMemo 안 쓰고, const [winNumbers, setWinNumbers] = useState(getWinNumbers)와 같이 써도 될까요? 전에 위와 같이 코드를 작성하셔서 함수가 계속 호출되는 것을 막으신 것 같아 질문드립니다.
- 미해결웹 게임을 만들며 배우는 React
8:30 에 delay가 null일 때 return 이 실행된다
안녕하세요 제로초님 강의 정말 잘 듣고 있습니다. 좋은 강의 감사드립니다. 질문이 하나 있어 올리게 되었는데 8분 30초 부분에 useInterval 설명하시는 부분에 if (delay !== null) { let id = setInterval(tick, delay); return () => clearInterval(id);} "delay가 null이 되면 return 부분이 실행되서 "라고 하셨는데 이 부분이 delay가 null이 되면 실행되는 게 맞는건가요? 조건문은 null이 아닌 경우인데 null이면 return 부분만 실행되는건지 아니면 let id = setInterval(tick, delay); 이 부분도 함께 동작하는지 여쭤봐도 될까요..
- 미해결웹 게임을 만들며 배우는 React
componentWillUnmount 와 useEffect
componentWillUnmount는 컴포넌트가 제거되기 직전에 실행되고, useEffect에서는 return에 함수를 넣어주면 componentWillUnmount 효과가 일어난다고 이해했습니다. 근데 클래스와 달리 훅에서는 useEffect 내에서 무조건 실행되기 때문에 클래스와 달리 렌더링이 많이 일어나는 것 같아요. 훅은 재사용성 측면에서는 유용하지만 렌더링 측면에서는 클래스에 비해 떨어진다고 이해해도 될까요?
- 미해결웹 게임을 만들며 배우는 React
인터랙티브 웹 페이지와 같이 쓰려면
안녕하세요, 제로초님. 강좌 정말 잘 보고 있습니다. 감사합니다. (강좌 뒷부분 보다가 이 질문을 어디에 써야 할 지 몰라서 제일 앞 강의에 올립니다.) 개인 프로젝트로 만드는 웹 팬게임에 리액트를 적용해보려고 합니다. 그런데 앞부분이 인터랙티브 웹 페이지라 이 부분은 리액트를 적용할 수 없지 않나 싶더라구요. 화면 제어를 리액트에게 맡기지 않으니까요.. 그래서 인터랙티브 기술을 적용한 html 파일 여러 개와 리액트를 적용할 html 파일 하나를 만들어서 페이지 이동을 시키면 되지 않을까 하는데, 제가 맞게 이해한 건지 궁금합니다.
- 미해결웹 게임을 만들며 배우는 React
setState에 대해 질문드립니다.
예전 데이터를 사용할 때는 setState(prev => ([...prev, {...}])); 로 적어야 문제가 안 생긴다고 말씀하셨습니다. 그런데 setState({tries: {...tries, { ... }}}) 와 같이 적어서 실행해봤는데 같은 결과가 나왔습니다. 강의에서 말씀하신 문제발생의 예시를 설명해주실 수 있을까요?
- 미해결웹 게임을 만들며 배우는 React
3-5. 주석과 메서드 바인딩 강의 중 화살표 함수와 기존 함수 선언의 this
안녕하세요 선생님. 좋은 강의 잘 듣고 있습니다. 강의에서 화살표 함수와 this를 설명하시면서 하신 말씀이 잘 이해가 가지 않아 이렇게 질문 남깁니다. 기존 함수의 형태로 선언 시에 this.onSubmitForm = this.onSubmitForm.bind(this) 등의 코드를 따로 선언해주어야하며, 이를 화살표함수에서 자동으로 해준다고 말씀하셨습니다. 제가 화살표 함수에 대해서 배울 때에는 따로 this를 바인딩 하지 않고 화살표함수보다 한단계 외부에 있는 this를 그대로 가져와서 사용한다고 배웠고 더불어, 기존 함수 선언에서의 this 는 전역 객체를 말한다고 알고 있습니다. 자동으로 해준다기보다는 기존 함수 선언 방식에서는 this가 전역 객체로 선언되어있기때문에 따로 bind를 하는 과정이 필요하고, 화살표 함수는 this 바인딩을 따로 하지 않기 때문에(전역객체가 아니라 한단계 외부에 있는 this를 그대로 사용할 수 있기에) 해당 과정이 생략될 수 있는 것이 아닌가 하는 생각이 들었습니다. 혹시 제가 잘못 이해하고 있다면 올바르게 고쳐주시면 감사하겠습니다. 질 좋은 강의를 무료로 올려주셔서 다시 한 번 감사합니다! 좋은 하루 되세요!