무료
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결처음 만난 리액트(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장의 실습 코드에서 저렇게 중괄호에 오류가 나서 실행이 안되는데 뭐가 문제일까요ㅠㅜ 종종 버전 문제들도 보이길래 혹시 그건가 싶긴한데,, 도움 부탁드립니다ㅠㅜ
- 미해결처음 만난 리액트(React)
json파일의 문제가 있다는데 해결을 못하겠습니다...
계속 제이슨파일의 문제가 있다고하는데 해결을 못하겠습니다...ㅠㅠㅠ 스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
- 해결됨처음 만난 리액트(React)
NotificationList.jsx 챕터 6장 실습 내용 질문 - 동시에 2개씩 나옴
요약: 3개가 각각 1-1-1 로 1초 간격으로 나와야 하지만, 2-1 로 나옴. 즉 2개가 한번에 나오고 나머지 1개가 나옴, notification 개수를 5개로 늘려봤더니, 1-1-1-1-1이 나와야 하지만 2-2-1로 나옵니다. 어디가 문제일까요.. 1. NotificationList import React from "react"; import Notification from "./Notification"; const reservedNotifications = [ { message: "안녕하세요, 오늘 일정을 알려드립니다.", }, { message: "오전은 피곤합니다", }, { message: "점심식사 시간입니다.", }, { message: "30분 후 잠시 휴식하겠습니다.", }, { message: "퇴근합시다.", }, ]; var timer; class NotificationList extends React.Component { constructor(props){ super(props); this.state = { notifications: [], }; } componentDidMount() { const { notifications } = this.state; timer = setInterval( () => { if (notifications.length < reservedNotifications.length){ const index = notifications.length; notifications.push(reservedNotifications[index]); this.setState({ notifications : notifications }); } else { clearInterval(timer); } }, 5000); } render() { return ( <div> {this.state.notifications.map((notification) => { return <Notification message={notification.message}/>; })} </div> ); } } export default NotificationList; 2. Notification import React from "react"; const styles = { wrapper: { margin: 8, padding: 8, display: "flex", flexDirection: "row", border: "1px solid grey", borderRadius: 16 }, messageText: { color: "black", fontSize: 16 } }; class Notification extends React.Component { constructor(props) { super(props); this.state = {}; } render() { return ( <div style={styles.wrapper}> <span style={styles.messageText}>{this.props.message}</span> </div> ) } } export default Notification; 도와주세요!
- 미해결처음 만난 리액트(React)
react 연결이 안되는 것 같습니다..
초기셋팅부터 차근차근 따라오고 복사한후 붙여넣기로 잘작성했는데 버튼이 나오지 않습니다 혹시 해결방법 알수 있을까요?
- 미해결처음 만난 리액트(React)
index.js 실행
Book.jsx, Library.jsx, index.jsx를 제외한 나머지 파일들에 대한 내용이 어디있을까요?
- 미해결처음 만난 리액트(React)
강의보고 아무리 따라쳐도 안될것임.
/**/ import React from "react"; const styles = { wrapper: { margin : 9, padding : 9, display : "flex", flexDirection: "row", border: "1px solid grey", borderRadius : 15 }, messageText: { color: "black" ,fontSize : 15 }, }; class Notification extends React.Component{ constructor(props){ super(props); this.setState = {}; } render(){ return( <div style={styles.wrapper}> <span style={styles.messageText}>{this.props.message}</span> </div> ); } } export default Notification; /**/ import React from "react"; import Notification from "./Notification" const reservedNotifications = [ { message : "안녕하세요, 오늘 일정을 알려드립니다.", }, { message : "안녕하세요, 오늘 점심을 알려드립니다.", }, { message : "안녕하세요, 오늘 저녁을 알려드립니다.", }, ]; var timer ; class NotificationList extends React.Component{ constructor(props){ super(props) this.state = { notificationarr : [{ message : "안녕하세요 ." }] , } } componentDidMount(){ const { notificationarr } = this.state; timer = setInterval(() => { if(notificationarr && notificationarr.length < reservedNotifications.length){ const index = notificationarr.length; console.log(index); notificationarr.push(reservedNotifications[index]); this.setState({ notification: notificationarr, }); }else{ clearInterval(timer); return; } }, 1000); } render() { return( <div> { this.state.notificationarr.map((notification) => { return<Notification message={notification.message} /> })} </div> ); } } export default NotificationList
- 미해결처음 만난 리액트(React)
index.js 보실분 참고하세욤
import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import Libray from './chapter_03/Libray'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <Libray /> </React.StrictMode> ); // 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)
styled-components를 적용하려면
styled-components를 적용하려면 꼭 스타일을 위한 component를 만든다음에 그걸로 감싸야하나요? 그렇게 사용하다보면 리액트 콤포넌트와 스타일 콤포넌트가 섞여서 헷갈리지 않을까요?
- 미해결처음 만난 리액트(React)
0:26초에
const scaleName = {...} 이 변수 선언을 function TemperatureInput(props) { return (...) } 이거 위에(밖에) 선언하는 이유가 있나요? 저는 항상 function 함수 안에 변수 선언을 했는데 밖에다 하는게 성능면에서 유리한가요? 저는 항상 function TemperatureInput(props) { 바로 밑에 변수 선언을 했습니다.
- 미해결처음 만난 리액트(React)
MyButton.js 파일도 공유부탁드립니다
MyButton.js 파일도 공유부탁드립니다