누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌대시보드

배열 데이터 제거하기에서 PhoneInfo.js 스크립트에서 handleRemove 함수 내부에서onRemove(Info.id) 대신key값을 구조분해할당 받아onRemove(key)를 줬는데제목과 같은 에러가 뜨고 정상적으로 동작을 안하더라고요.검색해보니 prop은 자식컴포넌트로 전달하지 않는다고 하더라고요.이에 대한 설명이 빠져있어서 그런데 key는 왜 자식 컴포넌트로 넘기지 않는걸까요?

영상 속 App.js에서는 클래스로 정의되어있는데요요새는 React app create하면,디폴트로 function App()으로 만들어놓더라구요 클래스에서는 handleCreate=() =>{ }정의가 되지만,function으로 정의된 App.js에서는...오류가 뜹니다.const를 앞에다 붙여도 안되고;;왜그럴까요?클래스 컴포넌트가 아닌 function으로 정의된 App.js에서는 어떻게 내부 함수를 생성해야하는지 알려주세요.ㅠㅠㅠ 

PhoneForem.js 파일에서 [e.target.phone] : e.target.value 해줘야하지 않나요?

코드샌드박스에서 작성중인 데이터입니다.https://codesandbox.io/s/upbeat-jasper-gfb978?file=/src/App.js:0-563 import "./styles.css";import { db } from "./firebase";import { doc, onSnapshot } export default function App() { const unsub = onSnapshot(doc(db, "cities", "SF"), (doc) => { let word = "hsdsi"; console.log("Current data: ", doc.data().name); word = doc.data().name; }); //word = unsub.name; return ( <div> <p> {word} </p> </div> ); // Add a new document in collection "cities"} word 변수를 선언해서 return 값으로 word 변수를 받아서 rendering 하려고 합니다. onSnapshot( ) 안에서 let word = "" ;으로 초기 변수 설정을 해주지 않으면, 에러가 계속 뜨더라구요.어쩔수없이 이렇게 선언해서 return 값에서 불러왔는데, 렌더링은 잘되지만, 코드 자체는 에러가 뜹니다.제가 볼때도 const 내부에서 선언하면 호이스팅이 안되기때문에 변수 초기화가 안되서 이렇게 하면 안될것 같지만, 일단 렌더링이 되긴하네요. 근데 코드상에서는 빨간줄이 밑줄 그어지면서잘못 코드한것처럼 에러가 나는것 같습니다.어떻게 해줘야할까요?

강의 교재를 pdf 로 받아 볼수 있을까요?   https://react-anyone.vlpt.us/01.html   위 링크 html의 내용들이요.

벨로퍼트님께,   안녕하세요, 수강한지는 꽤 오래 지났고, 지금은 혼자 독학으로 프로젝트를 만들고 있는 학생입니다. 벨로퍼트님 유튜브 보면서 여러가지 배운 것들이 많고, 또 여쭤본다면 비교적 금방 해결될 수 있을 거라 생각돼 이렇게 질문을 남겨 봅니다. 혼자 약 4-5개월 동안 이것도 저것도 해봤지만, 포기하고 싶은 마음이 들기도 하다가 혹시나 해서 여쭤봅니다.   제가 생각하기에, 이 문제는 제가 라이프사이클 관련하여 제대로 접근하는 방법(ex. 디버깅)을 제대로 몰라서 발생한 문제라고 생각합니다. 답변 주시면 진심으로 감사하겠습니다.   원하는 기능: 캘린더의 날짜를 선택하고, 해당 날짜의 스케줄에 추가된 Item을 선택했을 시, 해당 Item을 수정할 수 있는 창을 띄우는 것. 문제: Item을 선택한 후, Navigation을 활용하여, onpress시 화면 변경을 시도했으나, Navigation의 내용을 불러올 수 없음.   github: https://github.com/Gophycal/Goplan   1. Eventhandelr 오류 <Agenda // loadItemsForMonth={loadItems} items={items} selected={'2022-05-11'} renderItem={renderItem} // Specify how agenda knob should look like renderKnob={() => { return ( <View> <Text>renderKnob</Text> </View> ); }} // Specify what should be rendered instead of ActivityIndicator renderEmptyData={() => { return ( <View> <Text>renderEmptyData</Text> </View> ); }} /> <Button style={{}} title="+" onPress={() => navigation.navigate('TodoListCreation')} /> </> 관련 에러로 Eventhandler 에러가 있었습니다. props를 통해, navigation을 전달하는 방식을 사용하려 했으나, renderItem 함수가 Eventhandler이기 때문에, 추가로 변수를 전달할 수 없다는 오류 메세지를 받았습니다.   이 오류는 Agenda 컴포넌트의 renderItem의 속성값을 통해, 변수를 전달하는 props 방식을 활용하다 발생했습니다.   2. 해결방안   나름 고민해본 해결방안입니다만, 솔직히 저는 관련 학과도 나오지 않고 독학하고 있는 중이기 때문에, 접근하기 어렵다고 판단돼 마지막으로 고려해본 방법 중 하나입니다. 바로 처음에 말씀 드렸던, 라이프사이클을 이용한 접근 방법입니다.   디버깅을 통해 Agenda 컴포넌트의 라이프사이클을 파악하여, 해당 함수의 순서를 찾고, 그 순서에 맞추어 해당 함수로 변수를 전달하는 방법을 찾아, renderItem 함수에 navigation을 전달하는 방식입니다.   현재 제가 접근하고 있는 방법입니다만, 너무나 어렵습니다. 도움 부탁드립니다.

``` render() { return ( <div ref={(ref) => (this.myDiv = ref)}> <h1> 안녕하세요 리액트 </h1> <MyComponent value={this.state.counter} /> <button onClick={this.handleClick}> click here </button> </div> ); } ```

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

강의에서 6:38에 var는 더이상 사용안한다 하셨는데, https://codesandbox.io/s/react-basics-forked-sc2re?file=/src/App.js:100-105var로 사용해도 오류가 안나는 부분은 왜일까요?

수강 자료는 어디서 다운로드 받나요강의는 볼수있는데 참고 자료가 있는거같은데 어디서 받는지 잘모르겠네요 ;

'React 와 Virtual DOM 의 이야기' 영상 링크가 변경된 것 같습니다. 기존 링크를 따라가면 비공개 영상이라고 나옵니다. 변경된 링크를 공유드립니다. https://www.youtube.com/watch?v=BYbgopx44vo

흘러가는 방식이나 해석좀 부탁드리겠습니다 ㅠㅠ..

안녕하세요 리액트 기본 개념 관련 질문드립니다. 리액트에서 VirtualDOM이 기존 DOM과 비교하여 자동으로 바뀐부분만 바꿔준다고 이해했습니다. 그런데, state의 불변성을 유지하면서 프로그래머가 shouldComponentUpdate()에서 최적화 처리를 해주는 것과 리액트에서 자동으로 해주는 앞선 개념과 어떻게 다른 내용인것인지 모르겠습니다. 전자는 리액트에서 자동으로 해주는 것. 후자는 프로그래머가 처리해주어야 하는 내용인데.. 같은 내용인 것처럼 이해가 되어서 어떻게 다른 내용인지 궁금합니다.

저는 이전에 react-native 를 먼저 공부하다 이번에 react 를 처음 공부하게 되었습니다. 그동안 npm 을 사용하다 이번 기회에 yarn을 처음사용하여 study 를 마쳤서 npm 을 사용해서도 해보려고 하니 안됩니다. npx create-react-app myProject 라고 치니 자동적으로 yarn으로 만들어지고 npm create-react-app myProject 라고 실행시키면 만들어 지지 않습니다. npm 과 yarn 을 한  device 에 깔면 안되는건가요? npm 과 yarn 둘다 installed 되어 있을때 npm 으로 create 할수 있는 방법을 알고 싶습니다. npx create-react-app my-app npx creanpx create-react-app my-appte-react-app ㅞㅌmy-app

12:19 화면을 보시면, 23번줄에 onUpdate(info.id, {})를 주셧습니다. 근데 궁금한게 <PhoneInfo onUpdate={onUpdate} onRemove={onRemove} info={info} key={info.id} /> PhoneInfoList에서 위와같이 map으로 PhoneInfo를 하나하나 뿌려주었는데요. 뿌려줄때 안에 key가 바로 info.id잖아요?  그럼 , 12:19 화면에서 21번줄에서 {info, onUpdata, key} 이렇게 key값까지 props로 가져와서  23번줄에 있는 onUpdate(key, {}) 이렇게 햇거든요? 근데 이렇게 했더니 수정이 되지를 않습니다, 왜 이런거죠?

파일 수정 후 저장시 자동정렬 기능 끄니 되는거 같아서 공유합니다. 1. 파일 - 기본 설정 - 설정   2. formatOnSave를 입력한다. 3. 첫번째 셀렉박스 체크해제

1. 4:05 에서 this.state.number에서 this는 App.js에서 return <Counter /> 구문이 실행될때 Counter.js에 있는 this.state.number가 실행되서 this가 Counter이란걸 아는건가요/?2. handleDecrease 함수에서 화살표 함수의 this는 외부에서 찾기 때문에 <Counter/>가 실행될때 외부에서 State값을 찾을 수 있었던 건가요?3. handleDecrease 함수가 그냥 function이면 이 함수가 호출될때 handleDecrease함수만 분리되서 나오기 때문에 this를 못 찾는 것인가요?

배열 데이터 렌더링 및 관리파트에서요. Props로 값 전달 받을 때, PhoneInfo에서는 this.props.info로 받는데요.예) const { name, phone, id }= this.props.info; 왜 PhoneInfoList에서는 그냥 props로만 받는지 궁금합니다.  왜 props.data로 안한 것인가요?예) const {data} = this.props;

함수형 컴포넌트는 state를 어떤 식으로 정의하는지 궁금합니다.

코드센드? 요기 사이트에서 그냥 똑같이 코드 작성하면 작동하는거 맞죠?...