무료
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결처음 만난 리액트(React)
chapter-15 질문입니다
npm strat를 했는데 이렇게 뜹니다. 몇번을 코드를 고쳐봤는데도 이렇게 떠서 질문남깁니다. 코드도 올려놓겠습니다.import styled from "styled-components"; const Wrapper = styled.div` padding: 1rem; display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; background-color: lightgrey; `; const Block = styled.div ` padding: ${(props) => props.padding}; border: 1px solid black; border-radius: 1rem; background-color: ${(props) => props.backgroundColor}; color: white; font-size: 2rem; font-weight: bold; text-align: center; `; const blockItems = [ { label: "1", padding: "1rem", backgroundColor: "red", }, { label: "2", padding: "3rem", backgroundColor: "green", }, { label: "3", padding: "2rem", backgroundColor: "blue", }, ]; function Blocks(props) { return ( <Wrapper> {blockItems.map((blockItem) => { return ( <Block padding={blockItem.padding} backgroundColor={blockItem.backgroundColor} > {blockItem.label} </Block> ); })} </Wrapper> ); } export default Blocks;
- 미해결처음 만난 리액트(React)
List and Key
실습을 하고 전부 확인을 해보니 warning이 하나가 남아있는데 이건 아무리 잡아도 사라지지를 않아서 질문 남겨봅니다.
- 미해결처음 만난 리액트(React)
리액트 시작하기 부분에서 계속 막히네요 코드는 제대로 입력한거같은데 버튼이 생성이 안되고있습니다.
<html> <head> <title>이규정의 블로그</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>이규정의 블로그에 오신 여러분을 환영합니다!</h1> <div id="root"></div> <!-- 리액트 가져오기 --> <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script> <!-- 리액트 컴포넌트 가져오기 --> <script src="MyButton.js"></script> </body> </html>function MyButton(props) { const [isClicked, setIsClicked] = React.useState(false); return React.createElement( 'button', { onClick: () => setIsClicked(true) }, isClicked ? 'Clicked!' : 'Click here' ) } const domContainer = document.querySelector('#root'); ReactDom.render(React.createElement(MyButton), domContainer);무엇이 문제인지 봐주시면 감사드리겠습니다.
- 미해결처음 만난 리액트(React)
리액트 버전 질문
state실습 편에서 timer와 reservedNotifications가 정의되지 않았닫고 오류가 뜹니다 혹시 강의에 쓰이는 리액트의 버전이 17.몇 인가요?
- 미해결처음 만난 리액트(React)
chapter 04 실습 (Clock)부분 화면이 계속 빈 화면만 나옵니다
1초마다 옆부분 오류가 늘어가는거 보면 setInterval은 제대로 작동을 하고 있는거 같긴한데 오류를 클릭해보면 아래 부분이 오류라고 나오는데 도대체 뭐가 오류인지 잘 모르겠습니다ㅠㅠ - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
- 미해결처음 만난 리액트(React)
chapter 04 화면이 계속 빈 화면만 나옵니다 ㅜㅜ
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.터미널 돌리면 막상 화면에 아무것도 없는 하얀색 화면만 나와서 이게 뭐가 문제인지 알고 싶습니다....
- 미해결처음 만난 리액트(React)
섹션3에서 입력한대로 출력이 안되네요
기본 화면만 뜨고 변경한 내용으로 출력이 안돼요
- 미해결처음 만난 리액트(React)
섹션3 JSX 코드 작성해보기
이곳에서 코드를 똑같이 따라했는데 아래와 같은 오류가 뜨네요 ㅜㅜ 에러가 왜 나는지 모르겠습니다.
- 미해결처음 만난 리액트(React)
에러가 나요ㅠㅠ
에러가 나서요ㅠ
- 미해결처음 만난 리액트(React)
chapter_04 시계 만들기 화면이 안뜨네요
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.강의를 따라서 코드를 작성했는데 작동을 하지 않네요 .. 오타 확인도 했는데 틀린 부분은 없는 것 같은데 뭐가 문제인지 모르겠습니다.
- 미해결처음 만난 리액트(React)
7장 Accommodate에서 화면이 아무것도
- 7장 Accommodate에서 화면에 아무것도 안보이는데.. 혹 어떤 문제인지요?
- 미해결처음 만난 리액트(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 << 주석도 달아봤는데 해결이 안됩니다..