무료
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결처음 만난 리액트(React)
오류
뭐가 문제일까요 똑같이 작성한 거 같은데 자꾸 빨간줄이 생겨요ㅜㅜ
- 미해결처음 만난 리액트(React)
Containment 질문 드립니다.
import { useState, useCallback } from "react"; import ThemeContext from "./ThemeContext"; import MainContent from "./MainContent"; function DarkOrLight(props) { const [theme, setTheme] = useState("light"); const toggleTheme = useCallback(() => { if (theme === "light") { setTheme("dark"); } else if (theme === "dark") { setTheme("light"); } }, [theme]); return ( <ThemeContext.Provider value={{ theme, toggleTheme }}> <MainContent /> </ThemeContext.Provider> ) } export default DarkOrLight;import React from "react"; const ThemeContext = React.createContext(); ThemeContext.displayName = "ThemeContext"; export default ThemeContext;MainContent가 ThemeContext의 하위 컴포넌트입니다.그러면 <ThemeContext.Provider> 안에 있는 <MainContent /> 컴포넌트는 ThemeContext.Provider 안의 props.children으로 간주될텐데 ThemeContext 에 {props.children}가 없어도 <MainContent />가 표시되는 이유가 궁금합니다. .privider메서드(메서드로 지칭하는게 맞나요...?ㅎ)를 사용하면 자동으로 하위 컴포넌트를 표시하는 기능(암묵적으로 {props.children}를 사용한다던지...)이 있는 건가요?
- 해결됨처음 만난 리액트(React)
Contex와 redux같은 전역 상태관리 라이브러리
Contex가 하위 컴포넌트들에서 해당 변수에 바로 접근이 가능하게 만들어주는 것은 이해가 되었습니다.하지만 한 가지 의문점이 있습니다.저의 짧은 지식으로는 redux같은 전역 상태 관리 라이브러리를 이용하면 모든 컴포넌트가 접근할 수 있는 store라는 공간이 생기는 것으로 알고 있습니다. 그래서 redux를 사용한다면 contex는 굳이 사용할 필요가 없는 것으로 생각됩니다. redux같은 전역 상태 관리 라이브러리를 이용할 때에도 context를 사용하는 경우가 있는지 궁금합니다. 그리고 이전 질문에서 엄밀히 말하면 context가 상태 관리는 아니라고 하셨는데 상태 관리와 context의 차이점을 잘 모르겠습니다.. 간략하게나마 차이점을 설명들을 수 있을까요?
- 해결됨처음 만난 리액트(React)
useRef가 잘 이해되지 않습니다.
useRef() Hook의 다음 코드에서 질문이 있습니다.useRef는 DOM에 접근하기 위해 사용하는 Hook으로 이해하면 될까요?예시 코드에서 <input type="text" ref={inputElem} />inputElem을 해당 input태그에 접근하기 위해 useRef를 사용하는 것이 맞나요?useRef() Hook이 데이터 변경을 감지하지 못해서 HTML 코드에 있는 ref의 변경을 감지할 수 있는 useCallback() Hook을 대신 사용하는게 맞나요?그럼 useCallback을 useRef를 대체하여 사용가능한 건가요?
- 미해결처음 만난 리액트(React)
미니블로그 프로젝트 빌드시 오류
안녕하세요 마지막 프로젝트 진행시 오류때문에 질문남겨드립니다. 이러한 오류가 생기는데 해결방법을 잘 모르겟습니다 ㅠㅠ
- 해결됨처음 만난 리액트(React)
chapter_03 Book, Library.jsx 진행시 한글 깨짐 문의드립니다.
안녕하세요 선생님현재 chapter_03 진행 중인데요,jsx 실습 진행중인데,제 코드는 이렇구요, jsx는 이렇게 작성하였습니다. 그리고 npm start로 react-app 실행 시 요렇게 한글이 깨지는데요 혹시 해결 방안을 알 수 있을까요?
- 미해결처음 만난 리액트(React)
node.js 설치
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.node.js 설치를 완료했는데 버전이 안나오는데 왜 그런건가요?
- 해결됨처음 만난 리액트(React)
component관련 질문있습니다.
안녕하세요 🙂React 첫 인강을 소플님의 강의로 시작했습니다.소플님의 인강을 들으면서 유튜브에 올라오는 React 사이드 프로젝트들을 따라하고 있는데 component관련에서 궁금한 사항이 생겨서 늦게나마 질문을 올립니다. 예시) Main component 안에 Button // List // Write 3개의 component가 있다고 가정한다면소플님은 먼저 3개의 작은 component들을 만들고 조합하여 Main component를 완성한다고 말씀하셨습니다.(재사용성 떄문)그런데 어떤분들은 먼저 Main component에서 3개의 작은 component 내용들을 전부다 쓰고 마지막에 3개를 분리하여 각각 해당 component들에 나눠담으시던데 먼저 큰 컴포넌트를 레이아웃을 구성해서 작은 컴포넌트에 나눠 담는게 맞는건지작은 컴포넌트들을 조합해서 큰 컴포넌트를 만드는게 맞는건지 알 수 있을까요? React 처음으로 완강했는데 너무 유익한 강의였습니다 감사합니다:)
- 미해결처음 만난 리액트(React)
버튼은 뜨는데 눌렀을 때 동작하지 않아요.
17, 17.0.0, 18.0.0 다 해봤는데 버튼은 뜨지만 눌렀을 때 글자가 바뀌지 않아요ㅠ 문제가 무엇일까요?
- 해결됨처음 만난 리액트(React)
9장 Conditional Rendering 실습 질문있습니다
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.[Toolbar.jsx][LandingPage.jsx][index.js][결과창]올려주신 영상과 동일하게 작업을 진행했다고 생각하는데 결과창에서 버튼을 선택해도 상태가 변경되지 않습니다.어떤 부분이 문제일까요??react 버전은 18입니다
- 미해결처음 만난 리액트(React)
여기서 백틱으로 감싸주는 이유가 궁금합니다.
const Wrapper = ~~~ 아래에 백틱으로 감싸주는 이유가 궁금합니다.그리고 왜 저는 강사님처럼 안나오고 전부 붉게 나올까요..?
- 미해결처음 만난 리액트(React)
chap05) 저는 왜 폰트가 사진에 딱 붙어서 나올까요?
CSS 코드는 올바르게 짠 것 같은데저는 사진에 착 달라붙어서 폰트가 출력되네요..뭐가 문제일까요?
- 해결됨처음 만난 리액트(React)
알림이 1초마다 두 개씩 뜹니다.
분명히 코드를 그대로 따라 쳤는데 1초에 두 번씩 알림이 나오는 경우도 존재하나요?Warning: Each child in a list should have a unique "key" prop. 오류도 떴습니다. 각각 notification.jsx, notificationList.jsx 코드입니다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 Notificationimport React from 'react' import Notification from './notification' const reservedNotifications = [ { message: '안녕하세요, 오늘 일정을 알려드립니다.' }, { message: '점심식사 시간입니다.' }, { message: '이제 곧 미팅이 시작됩니다.' }, { message: '안녕하세요, 오늘 일정을 알려드립니다.' }, { message: '점심식사 시간입니다.' }, { message: '이제 곧 미팅이 시작됩니다.' }, { message: '안녕하세요, 오늘 일정을 알려드립니다.' }, { message: '점심식사 시간입니다.' }, { message: '이제 곧 미팅이 시작됩니다.' }, { message: '안녕하세요, 오늘 일정을 알려드립니다.' }, { message: '점심식사 시간입니다.' }, { 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) } }, 1000) } render() { return ( <div> {this.state.notifications.map(v => { return <Notification message={v.message}/> })} </div> ) } } export default NotificationList
- 미해결처음 만난 리액트(React)
chapter 6 실습
같은 실습 코드를 mac에서 돌렸을 경우에는 잘 작동되고 윈도우에서 돌리면 오류는 뜨지 않으나 작동되지 않고 빈화면만 출력되는데 이유가 무엇인가요?
- 미해결처음 만난 리액트(React)
챕터 6 실습 "./Notification" 경고
3번째 줄 "./Notification"에 왜 경고창이 뜨는걸까요? 실행은 잘 됩니다
- 미해결처음 만난 리액트(React)
[chapter_04]시계만들기 오류
안녕하세요 강사님. chapter03을 할때도 있던 문제와 더불어, chapter04를 진행할때도 문제가 생겨 질문드립니다.제가 궁금한 내용은port 3000번이 이미 사용중이라는 메세지가 뜨는이유(초반에 create ~~명령어를 사용해 my-app 폴더를 만들어 cd my-app , npm start를 쓸땐 port 3000번에 강의영상과 같은 화면이 잘 나왔습니다.) 이것 때문에 실행할때마다 포트번호가 3001, 3002, ... 3010 이런식으로 계속 증가합니다chapter3를 실행할땐 나오지 않던 에러페이지가 chapter4를 실행할때 나오는 이유입니다.(2번문제는 해결해서 에러는 확인해서 처리했습니다. 리턴할때 괄호를 붙이고 써서 나온 에러같아서 수정해보니 되더군요)우선 아래는 Clock.jsx파일입니다.import React from "react"; function Clock(props){ return( <div> <h1>안녕, 리액트!</h1> <h2>현재 시간: {new Date().toLocaleDateString()}</h2> </div> ); } export default Clock;그리고 index.js파일입니다.import 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'; import Clock from './chapter_04/Clock'; const root = ReactDOM.createRoot(document.getElementById('root')); setInterval(()=>{ root.render( <React.StrictMode> <Clock /> </React.StrictMode> ); }, 1000) // 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(); 이를 새 터미널을 활용해 실행시켜보면 다음과 같이 뜨는데요,여기서 y를 눌러 실행을 해보면 아래와 같이 에러가 뜹니다.에러가 나는 이유와 해결방안이 궁금합니다 감사합니다.
- 미해결처음 만난 리액트(React)
chapter_04 시계만들기에서 오류가 납니다ㅠㅠ
설명보고 따라하였는데 시계가 아닌 오류문구만 뜹니다..무엇이 문제일까요?ㅠㅠ
- 해결됨처음 만난 리액트(React)
context 질문 드립니다
안녕하세요 소플님1 context가 여러 컴포넌트에 접근을 할 수 있다고 하셨는데context는 상태 관리인건가요? 2 현업에서는 스타일 컴포넌트와 scss 중 어느걸 어 많이 사용 하나요?
- 해결됨처음 만난 리액트(React)
미니블로그
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.안녕하세요 마지막 미니블로그 테스트만 남았는데코드를 깃헙에서 그대로 가져와 복붙을 하고 실행해도 사파리에서는 null is not an object크롬에서는 Cannot read properties of null (reading 'useContext') TypeError: Cannot read properties of null (reading 'useContext') 오류가 뜹니다 어떻게 해야 할까요?
- 해결됨처음 만난 리액트(React)
useEffect() 안에 함수를 정의하는 이유가 무엇인가요?
안녕하세요, 소플님.챕터 7 나만의 훅 만들기를 공부하다가 궁금한 점이 있어서 질문드립니다. 228쪽 커스텀 훅 추출하기 예제 코드에서function useUserStatus(userId) { //... useEffect(() => { function handleStatusChange(status) { //... } //... }) //... }이런 식으로 useEffect 안에 handleStatusChange 함수를 정의하셨는데,useUserStatus 바로 아래에 정의하지 않고 useEffect 안에 정의하신 이유가 있을까요?어떤 상황에서 useEffect 안에 함수를 정의해야 하는 것인지 궁금합니다. 감사합니다.