웹 게임을 만들며 배우는 React 대시보드

useRef를 사용해서 위와 같이 해당 요소의 padding값을 구하려 했는데요. 첫 렌더링 시에는 ref.current.style을 읽지 못해서 useEffect에 넣어주었더니 style값은 읽어오도록 하였습니다. 다만 그 뒤에 얼마나 렌더링이 되든 style안에 값들은 계속 ''(string) 으로 나옵니다. 주석에 적은 다른 값으로는 style을 구할 수 있었습니다.ref를 사용해서는 값을 구할 수 없는 걸까요?

검은옷 입고 계실때에 사용하시던 키보드 정보 여쭤보고 싶습니다.. 좋은 강의에 키보드 소리도 너무 좋아서요.. 엉뚱한 질문 죄송합니다

안녕하세요, 제로초님. react 강의 잘 듣고 있습니다.ReactDOM.render(<LikeButton />, document.querySelector("#root"));이 코드는 실행되고,ReactDOM.createRoot(document.querySelector('#root')).render(<LikeButton />);이 코드가 안되길래 package.json 에서 react 버전 확인해보니 17이더군요! 구글링 해서 찾은 걸로 터미널에 npm install react@latest react-dom@latest 쳐서 최근버전 설치했는데 변경된 게 없어서 질문드립니다.감사합니다.

늘 좋은 강의 감사합니다.유효성 검사에 관해 짜보면서 useEffect를 사용해봤는데 2번째 사진 같이 dependency 오류가 뜹니다.dependency에 추가하지 않아도 코드는 잘 돌아가지만, state값이나 정규식을 추가하면 무한 렌더링이 일어납니다.제 생각에는 dependency를 추가해도 input에 입력 값이 없으면 관찰을 안할것이라고 생각해서 useEffect를 사용했는데요.오류 메시지는 무시해도 괜찮을까요?유효성 검사처럼 state를 계속 감시하는 상황일 때 useEffect를 사용한다면 state값을 dependency에 추가해도 괜찮을까요?혹은 useEffect를 잘못 사용한 걸까요?

React.Fragment로 변경을 해도 elements에서 div태그가 남아있습니다.새로 고침을 해도 변경이 되지 않아요

안녕하세요. 웹 게임을 만들며 배우는 React 강의를 시청중인 사람인데요.그 React Devtools강의에서 보여준 것 처럼 React 확장프로그램을 깔았는데 영상처럼 추가되는 항목이 없는데 이런 경우는 어떻게 해야 하나요??   [제로초 강좌 질문 필독 사항입니다]질문에는 여러분에게 도움이 되는 질문과 도움이 되지 않는 질문이 있습니다.도움이 되는 질문을 하는 방법을 알려드립니다.https://www.youtube.com/watch?v=PUKOWrOuC0c0. 숫자 0부터 시작한 이유는 1보다 더 중요한 것이기 때문입니다. 에러가 났을 때 해결을 하는 게 중요한 게 아닙니다. 왜 여러분은 해결을 못 하고 저는 해결을 하는지, 어디서 힌트를 얻은 것이고 어떻게 해결한 건지 그걸 알아가셔야 합니다. 그렇지 못한 질문은 무의미한 질문입니다.1. 에러 메시지를 올리기 전에 반드시 스스로 번역을 해야 합니다. 번역기 요즘 잘 되어 있습니다. 에러 메시지가 에러 해결 단서의 90%를 차지합니다. 한글로 번역만 해도 대부분 풀립니다. 그냥 에러메시지를 올리고(심지어 안 올리는 분도 있습니다. 저는 독심술사가 아닙니다) 해결해달라고 하시면 아무런 도움이 안 됩니다.2. 에러 메시지를 잘라서 올리지 않아야 합니다. 입문자일수록 에러메시지에서 어떤 부분이 가장 중요한 부분인지 모르실 겁니다. 그러니 통째로 올리셔야 합니다.3. 코드도 같이 올려주세요. 다만 코드 전체를 다 올리거나, 깃헙 주소만 띡 던지지는 마세요. 여러분이 "가장" 의심스럽다고 생각하는 코드를 올려주세요.4. 이 강좌를 바탕으로 여러분이 응용을 해보다가 막히는 부분, 여러 개의 선택지 중에서 조언이 필요한 부분, 제 경험이 궁금한 부분에 대한 질문은 대환영입니다. 다만 여러분의 회사 일은 질문하지 마세요.5. 강좌 하나 끝날 때마다 남의 질문들을 읽어보세요. 여러분이 곧 만나게 될 에러들입니다.6. 위에 적은 내용을 명심하지 않으시면 백날 강좌를 봐도(제 강좌가 아니더라도) 실력이 늘지 않고 그냥 코딩쇼 관람 및 한컴타자연습을 한 셈이 될 겁니다. 

안녕하세요 제로초님! 항상 좋은 강의해 주셔서 감사드립니다! 다름이 아니라 setTimout() 오류에 대해서 제가 이해한 내용을 적어 보았는데 제대로 이해했는지 확인을 부탁드리고자 질문을 작성하게 됐습니다! <이해한 내용>setTimeout()을 제거하지 않았을 때 발생하는 에러: (Lotto 컴포넌트의 부모 컴포넌트가 존재한다고 가정)  부모 컴포넌트가 Lotto를 없앴을 때 화면상에서 Lotto 컴포넌트는 사라졌지만 코드상에서는 여전히 존재하기 때문에 부모 컴포넌트가 렌더링 될 때마다 자식 컴포넌트인 Lotto 또한 렌더링 된다. 이로 인해 Lotto 컴포넌트의 componentDidMount()에 있는 setTimeout()이 계속 실행되어 메모리 누수가 발생하거나 의도하지 않은 에러가 발생하게 된다. 따라서 오류를 사전에 방지하기 위해 setTimeout()을 사용했을 경우 compnentWillUnmount()에서 항상 제거해 주어야 한다.

다른 강의에서 컴포넌트 외부에 함수를 선언하면 전역변수로 취급되어 동일한 명칭의 함수를 다른 컴포넌트에서 사용하지 못한다고하여 컴포넌트 내부에 함수 또는 변수를 선언하라고 했던걸로 기억하는데 컴포넌트 외부에서 선언해도 문제없나요?

임포트 잘 되어있는데 어디서 생기는 문제일까요?

작성한 코드는 아래와 같습니다. 제로초님과 코드가 다른 부분은 useRef 선언 부분 [] -> null,useEffect deps , useEffect return부분입니다.useRef를 배열이 아닌 상태로 사용하여 setTimeout을 설정시 문제되는 점이 있을까요? useEffect 함수 return 부분에 clearTimeout사용법이 저렇게 사용하는게 맞나요? onClick할 경우 새로운 번호를 winNumbers에 할당돼서 useEffect deps 를 winNumbers로 설정했습니다. 알맞게 잘 적용된걸까요? 이 코드로하면 잘 실행되고 마운트와 언마운트시 콘솔도 잘 찍힙니다.import React, { useEffect, useRef, useState } from "react"; import Ball from "./Ball"; function getWinNumbers() { console.log("getWinNumbers"); const numbers = Array(45) .fill() .map((v, i) => i + 1); const shuffle = []; while (numbers.length > 0) { shuffle.push( numbers.splice(Math.floor(Math.random() * numbers.length), 1)[0] ); } const bonusNumber = shuffle[shuffle.length - 1]; const winNumbers = shuffle.slice(0, 6).sort((a, b) => a - b); return [...winNumbers, bonusNumber]; } function Lotto() { const [winNumbers, setWinNumbers] = useState(getWinNumbers()); const [winBalls, setWinBalls] = useState([]); const [bonus, setBonus] = useState(); const [redo, setRedo] = useState(false); const timeout = useRef(null); useEffect(() => { console.info("useEffect start !"); for (let i = 0; i < winNumbers.length - 1; i++) { timeout.current = setTimeout(() => { setWinBalls((prevState) => [...prevState, winNumbers[i]]); }, (i + 1) * 1000); } timeout.current = setTimeout(() => { setBonus(winNumbers[6]); setRedo(true); }, 7000); return () => { console.info("useEffect end !"); timeout.current = clearTimeout(); }; }, [winNumbers]); const onClickRedo = () => { setWinNumbers(getWinNumbers()); setWinBalls([]); setBonus(null); setRedo(false); }; return ( <> <div>당첨 숫자</div> <div> {winBalls.map((i) => ( <Ball key={i} number={i} /> ))} </div> <div>보너스</div> {bonus && <Ball number={bonus} />} {redo && <button onClick={onClickRedo}>한 번 더!</button>} </> ); } export default Lotto;

이전 node강좌를 수강할 때는 cjs 방식을 사용하셨고, 이번 리액트 강좌에서는 esm 방식을 사용하셔서 cjs와 esm 모듈 방식에 대해 찾아본 결과 둘이 미묘하게 비슷하면서 동작 방식 확연히 다른 것을 확인했습니다.또한 노드 강좌에서는 cjs가 deprecated 안 된다고 하셨으나 vscode에서는 cjs 방식을 리팩토링 대상으로 보는 것도 제 궁금증을 증폭시켜서 찾아봤지만 확실하게 제 기준을 만들지 못했습니다.혹시 강의에서 예를 들어주신 것처럼 백엔드에서는 cjs를 사용하고 프론트에서는 esm을 사용한다던지 하는 제로초님만의 기준이 있으신가요?

안녕하세요.리액트 강의보다가 요즘에는 cra로 하면 웹팩설정을 따로 할 필요가 없다고 하던데 그러면 웹팩부분은 신경 안써도 되는건가요?

hooks 의 쪼개여진 setXXXX (ex. setResult()) 에서 class 문법처럼 또 다른 value의 이전 값을 어떻게 참조하나요 ?class : this.setState((prevState) => { return {result : prevState.value + ' 정답'}});  hooks : this.setResult((prevResult)=> { return ???? + ' 정답' })

3-9. React Devtools 강의를 듣다가 react development tools 플러그인이 빨갛게 나와서production으로 모드를 바꾸어 줘야 된다고 강의에서 설명 주셨는데요.webpack.config.js 파일에서 아래 두 부분을 변경하고 실행하였는데 오류가 납니다 process.env.NODE_ENV = 'production'; mode : 'production', const path = require('path'); const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'); process.env.NODE_ENV = 'production'; module.exports = { name : 'numberBaseball-setting', mode : 'production', devtool : 'eval', resolve : { extensions : ['.js','.jsx'] }, entry : { app : './client', }, module : { rules : [{ test : /\.jsx?$/, loader : 'babel-loader', options : { presets : [ ['@babel/preset-env', { targets : { browsers : ['> 1% in KR'], //browserslist }, debug : true, }], '@babel/preset-react' ], plugins : ['react-refresh/babel'], }, exclude: path.join(__dirname, 'node_modules'), }] }, plugins : [ new ReactRefreshWebpackPlugin(), ], output:{ path : path.join(__dirname,'dist'), filename : 'app.js', publicPath : '/dist', }, devServer : { // 새로 추가됨 devMiddleware: { publicPath: '/dist' }, // 실제로 존재하는 정적 파일의 경로 static: { directory: path.resolve(__dirname) }, hot: true } } 

안녕하세요 제로초님 덕분에 성장해서열심히 포트폴리오를 만들고있는 취준생입니다.모르는게 있으면 가끔 개발자 친구에게 물어보는데요친구는 클래스형 컴포넌트로 코딩을 하고저는 함수형 컴포넌트로 코딩해서 가끔 다툽니다. (친구는 리액트가 흥하기 전부터 리액트를 공부해서 클래스형 컴포넌트에 익숙해서 함수형 컴포넌트는 그냥 건드리지도 않고 배우지도 않았습니다.)친구가 말하기를"지금 현업에서 대부분은 클래스형 컴포넌트로 코딩을 한다 함수형 컴포넌트가 나온지 얼마 안됐는데 어떻게 이전에 클래스형 컴포넌트로 코딩을 했던 회사들이 다 함수형으로 바꾸겠냐. 스타트업이 아닌 이상 80% 회사는 클래스로 코딩한다. 클래스로 코딩해라."이렇게 이야기 하네요.. 저는 뭐 현업 코드를 접해본 적이 없어서 이걸 믿어야 할지.. 클래스로 코딩을 해야할지.. 모르겠습니다...제로초님의 의견을 듣고싶습니다.다른 분들 의견도 궁금해요! 댓글 달아주시면 감사하겠습니다 :) 

안녕하세요. 웹 게임을 만들며 배우는 React 강의 수강중인 초보자입니다!구구단 만들기 강의를 듣다가 궁금한게 생겨 문의드립니다<html> <head> <meta charset="UTF-8"/> <title>구구단</title> <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> </head> <body> <div id="root"></div> <!-- 결과: <div id="root"><button>Like</button></div> --> <script type="text/babel"> class GuGuDan extends React.Component { constructor(props){ super(props); this.state = { first: Math.ceil(Math.random() * 9), second: Math.ceil(Math.random() * 9), value: '', result: '', }; } render() { return ( <div> <div>{this.state.first} 곱하기 {this.state.second}는?</div> <form> <input type="number" value={this.state.value} onChange={(e)=> {this.setState({value : e.target.value}) }}/> <button>입력!</button> </form> <div>{this.state.result}</div> </div> ); } } </script> <script type="text/babel"> ReactDOM.render(<GuGuDan/>, document.querySelector('#root')); </script> </body> </html> 위 코드로 화면을 띄워주셨었는데요.위 코드에서 아직 button에 대한 동작은 작성하지 않았는데여기서 버튼만 눌러도 this.state.first와 this.state.second 값이 왜 변하는 걸까요 ??

안녕하세요.늘 재밌고 쉽게 배우고 있는데 궁금한 것이 생겨질문 납깁니다. 아래처럼 Ball 컴포넌트를 렌더링 할 때<div> {winBalls.map((v) => <Ball key={v} number={v} />)} </div> {winBalls.map((v) => <Ball key={v} number={v} />)}위와 같이 결과가 나오는데요.div로 감싸지 않았을 때 재렌더링 되는 이유가 있나요?어떤 이유로 재렌더링 되는지 궁급합니다.감사합니다.

6개월 학원 수료를 한 상태이고, 프론트엔드쪽 웹 개발자를 지망하고 있습니다.추가적으로 공부를 하고 웹사이트를 하나 더 만들어볼 생각을 하고 있는데css 전처리기, 프레임워크, css in js 등등 여러가지 기술이 많은데 면접에서 어필을 하려면대부분의 것을 기본 CSS위주로 짜서 CSS기본이 탄탄한 것을 어필해야 할지,sass나 styled component, tailwind 등의 기술 중 하나를 써서 할줄 아는 스택이 있다는것을 어필해야할지,antd, 부트스트랩 등의 프레임워크를 부담없이 떡칠해서 써서라도 화면을 깔끔하게 만드는것이 중요할지판단이 잘 안서네요. 혹시 조언을 좀 해주실 수 있으신가요?

초깃값을 넣어주지 않아도 정상동장하는데 , 넣어주는 이유는 무엇인가요?

안녕하세요 제로초님.<ul> {tries.map((t) => <Try key={} ... />)} </ul>만약 tries.length === 0 인 상태에서ul은 자식이 없는 상태로 화면에 렌더링 되는데ul이 렌더링 되지않게 하는 방법도 있나요?{ !!tries.length && <ul>{tries.map(...)}</ul> }위 방법이나 여러 방법으로 해봐도 오류 발생하네요ㅠㅠ vue에서는 ul에 v-if로 제어가 가능한데리액트에서도 비슷한 방법이 있는지 궁금합니다.