![Thumbnail](https://cdn.inflearn.com/public/courses/328866/cover/174035a3-ca6b-48cd-b122-c88df540cb04/처음_만난_리액트_v2_cover_inflearn.png)
무료
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결처음 만난 리액트(React)
문법질문
Accommodate.jsx 파일에서{isFull && <p style={{ color: "red" }}>정원이 가득찼습니다.</p>} 이거 동적으로 html 생성해주는 것 같은데 이거 문법 어떻게 검색해야되나요? 처음봐서./. 자바스크립트 문법인가여? {} 안에 이렇게 들어가는거 모르겟네요
- 미해결처음 만난 리액트(React)
출력 메시지 관련
정말 기초적인 질문일수도 있는데, 섭씨 온도를 아무리 올려봐도 출력되는 메시지가 '물이 끓지 않습니다'로 나옵니다.TemperatureInput.jsxconst scaleNames = { c: '섭씨', f: '화씨', } function TemperatureInput(props) { const handleChange = (event) => { props.onTemperatureChange(event.target.value); } return ( <fieldset> <legend> 온도를 입력해주세요 (단위 : {scaleNames[props.scale]}) : </legend> <input value = {props.temperature} onChange = {handleChange} /> </fieldset> ) } export default TemperatureInput;Calculator.jsximport React, {useState} from "react"; import TemperatureInput from "./TemperatureInput"; function BoilingVerdict(props) { if (props.celcius >= 100) { return <p>물이 끓습니다.</p> } return <p>물이 끓지 않습니다.</p> } function toCelsius(fahrenheit) { return ((fahrenheit - 32) * 5) / 9; } function toFahrenheit(celcius) { return (celcius * 9) / 5 + 32; } function tryConvert(temperature, convert) { const input = parseFloat(temperature); if(Number.isNaN(input)) { return ""; } const output = convert(input); const rounded = Math.round(output * 1000) / 1000; return rounded.toString(); } function Calculator(props) { const [temperature, setTemperature] = useState(""); const [scale, setScale] = useState("c"); const handleCelsiusChange = (temperature) => { setTemperature(temperature); setScale("c"); } const handleFahrenheitChange = (temperature) => { setTemperature(temperature); setScale("f"); } const celsius = scale === "f" ? tryConvert(temperature, toCelsius) : temperature; const fahrenheit = scale === "c" ? tryConvert(temperature, toFahrenheit) : temperature; return ( <div> <TemperatureInput scale = "c" temperature = {celsius} onTemperatureChange = {handleCelsiusChange} /> <TemperatureInput scale = "f" temperature = {fahrenheit} onTemperatureChange = {handleFahrenheitChange} /> <BoilingVerdict celsius = {parseFloat(celsius)} /> </div> ) } export default Calculator;어디서 잘못된걸까요? 개발자 도구에서 component를 확인해봐도 scale, temperature 값은 정확하게 들어가는 것 같습니다.
- 미해결처음 만난 리액트(React)
오류
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.TemperatureInput.jsx 코드Calculator.jsxindex.js이렇게 했습니다. 이렇게 할 경우,이렇게 뜨고, 저기에 입력할 경우,이런 오류가 뜹니다. 오류의 부분에서 TemperatureInput.jsx 10번째 줄이 함수로 지정되어 있지 않다는 의미를 모르겠습니다. 또한 어느 부분에서 오류가 있기에 실행 화면에서 단위: " " 이 부분(" ")에 해당 문자가 뜨지 않는지 모르겠습니다.
- 해결됨처음 만난 리액트(React)
질문 있습니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.onClick을 했을 때, 값이 true로 반환이 안 되어서 그 부분 코드를 보았는데, 어떤 것이 오류인지 모르겠어서 질문 드립니다! (9장) Toolbar.jsxLandingPage.jsxindex.js
- 해결됨처음 만난 리액트(React)
실행이 왜 안되는지 모르겠습니다..
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.syntax 에러는 안 뜨는데, app에서 error가 뜹니다. 교재랑 같은 코드인데, 어느 부분에서 오류가 나는 걸까요..? (교재 practice 6.3입니다.)Notification.jsx NotificationList.jsxindex.js 발생하는 error
- 미해결처음 만난 리액트(React)
npm start 이후 크롬창에 아무것도 뜨지않음
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.사진 첨부 순서대로 index.js, Comment.jsx, CommentList.jsx, npm start시 출력되는 크롬 화면입니다. 이전 시계 실습에서도 동일하게 빈 화면이 출력 됐는데 타 수강생님이 올려주신 코드를 적용하니 해결이 됐어서 다음 챕터를 진행하였습니다. 그런데 동일하게 빈화면이 출력되어 어떤 부분에서 문제가 있는지 도저히 찾을 수 없어서 질문드립니다.
- 미해결처음 만난 리액트(React)
unmount 관련 질문
this.state({ notifications: [], });component들을 unmount 시키는 과정에서 다음과 같은 오류가 나옵니다.Uncaught TypeError: this.state is not a function그리고 생명 사이클이 끝나지도 않는데, 로그창은 다음과 같이 나오네요.unmount 시키는 다른 방법이 있는건가요?로그창을 보면 굳이 state를 비워주지 않아도 unmount 함수가 호출되는 것 같은데 이것도 StrictMode 때문에 그런건가요?
- 미해결처음 만난 리액트(React)
안녕하세요 작동이 안됩니다 ㅜㅜㅜ
순서대로 Book.jsx Library.jsx index.js 입니다. 그런데 실행해보면 다음과 같은 에러가 나는데 찾아봐도 해결이 안돼서요!! ㅠ도와주세요! 감사합니다
- 미해결처음 만난 리액트(React)
작동이 안되네요....ㅠㅠ
Line 4:8: 'App' is defined but never used no-unused-vars이러한 내용으로 에러가 뜨고에러 라인 옆에 // eslint-disable-next-line << 주석도 달아봤는데 해결이 안됩니다..
- 미해결처음 만난 리액트(React)
useCallback 질문
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요!! 굉장히 초보적 질문일 것 같긴 한데,,!! 14장 실습 파트를 하던 중 궁금한 점이 생겨 질문 드립니다.const [theme, setTheme] = useState("light"); const toggleTheme = useCallback(() => { if(theme == "light"){ setTheme("dark"); }else if (theme == "dark"){ setTheme("light"); } }, [theme]); 저는 useCallback 함수가 의존성 배열 내의 데이터가 변경 될 때 실행된다고 이해했는데요,위 코드는 실행 함수가 theme를 변경하는 코드인데,theme 변경 => theme 변경하는 callback 함수실행 순서가 아니라theme 변경하는 callback 함수 실행 => theme 변경 의 순서인것 같아서이게 어떻게 실행되는건지 헷갈려서 질문 드립니다..!!
- 미해결처음 만난 리액트(React)
JSX 입문 강의 질문입니다.
JSX를 각각 Book, Library로 만들고 index.js 단에 app 부분을 Library로 바꿨음에도 작동이 안 되고 있습니다. 객체 지정 대부분을 앞에 대문자로 주었음에도 오류는 똑같이 빈 화면이 뜨는 오류가 발생하고 있습니다.코드는 하단에 작성해놓겠습니다.- Book.jsximport React from "react"; function Book(props){ return ( <div> <h1>{`이 책의 이름은 ${props.name} 입니다.`}</h1> <h2>{`이 책은 총 ${props.numOfPage} 페이지로 이뤄져 있습니다.`}</h2> </div> ) } export default Book;-Library.jsximport React from "react"; import Book from "./Book"; function Library(props) { return( <div> <Book name="처음 만난 파이썬" numOfPage={300}/> <Book name="처음 만난 AWS" numOfPage={400}/> <Book name="처음 만난 리엑트" numOfPage={500}/> </div> ); } export default Library;-index. jsimport React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import Library from './chapter_03/Library'; ReactDOM.render( <React.StrictMode> <Library /> </React.StrictMode>, document.getElementById('root') ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals();
- 해결됨처음 만난 리액트(React)
안녕하세요 서브 설치 후 빌드하는게 안됩니다
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 서브를 설치 후 serve -s build를 터미널에 입력하면 에러가 발생합니다 ㅠㅠ
- 미해결처음 만난 리액트(React)
코드가 제공이 안되나요..?
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 매번 css 속성을 따라쳐야되는건지요..
- 미해결처음 만난 리액트(React)
제가 이해한게 맞는지 물어봅니다
component라는 틀이있고 그틀에 props라는 속성을 입력하면틀에 속성값이 적용되고 적용된것이 출력되는것인가요
- 미해결처음 만난 리액트(React)
react 18에 맞춰서 작성한 코드입니다.
바뀐 react 18에 따라서 작성된 코드입니다.바뀐 리엑트로 어떻게 코드 작성해야하는지 모르겠는 분들은 참고하시면 좋을것 같습니다! https://github.com/matt700395/first-meet-react/commit/7df1b7367e6a2c00f21ae30a92e39102959e373f
- 미해결처음 만난 리액트(React)
작동이안됨니다
Line 7:29: 'Data' is not defined no-undefSearch for the keywords to learn more about each error.라며 자동이 안되고 data랑 toLocaleTimeString가 색이 안변한게 이상합니다import React from "react"; function Clock(props){ return( <div> <h1>안녕, 리액트!</h1> <h2>현재 시간: {new Data().toLocaleTimeString()}</h2> </div> ); } export default Clock;코드는 문제가 있는지 모르겠습니다 문제 될만한게 없는듯 합니다index.js 완전똑같습니다
- 미해결처음 만난 리액트(React)
실행 시켜도 변화가 없어요
index.js랑 jsx 완벽합니다app.js 문지인것같은데 왜일까요잠고로 왜 app.js가 문제냐면다른게 문제가 없습니다.제가 전 강의에서 뭔가를 안바꿨나요.버전 최신입니다
- 미해결처음 만난 리액트(React)
왜 하나씩 나와야 되는데 2개씩 나올까요 똑같이 따라했는데
왜 하나씩 나와야 되는데 2개씩 나올까요 똑같이 따라했는데
- 미해결처음 만난 리액트(React)
6강 실습에 관해 질문드립니다!
안녕하세요 최근에 강의를 듣기 시작한 학생입니다. 6강 실습중인데 마지막처럼 화면이 나오질 않아 질문남깁니다. 그리고 혹시 언제쯤 18버전 코드로 업데이트 해주시는지 궁금합니다. 6강 실습에 관해 다른분에게 올려주신 공식문서를 봐도 조금 헷갈려서요ㅠㅠ
- 해결됨처음 만난 리액트(React)
6장 NotificationList.jsx 질문
- 안녕하세요, 6장의 실습 코드에서 저렇게 중괄호에 오류가 나서 실행이 안되는데 뭐가 문제일까요ㅠㅜ 종종 버전 문제들도 보이길래 혹시 그건가 싶긴한데,, 도움 부탁드립니다ㅠㅜ