[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지대시보드

강사님 강의를 열심히 듣고 있습니다. 근데, 잘 따라가다가 데이터 추가하기에서 정말 몇번씩 다시 써보고 확인했는데 전혀 동작을 하지 않습니다. 그전까지는 잘 되었구요, 어떻게 해결을 해야할지....ㅠㅠ   강사님 소스를 다 복사해서 붙여봐도 안되어요.... 일기저장하기 버튼을 클릭하면 아무것도 동작하지 않습니다. alert 창도 뜨지 않구요   App.js 파일 import {useRef, useState} from "react"; import './App.css'; import DiaryEditor from './DiaryEditor'; import DiaryList from './DiaryList'; import { getActiveElement } from '@testing-library/user-event/dist/utils'; // const dummyList = [ //   { //     id:1, //     author:"홍길동", //     content:"하이 1", //     emotion:5, //     created_date : new Date().getTime() //   }, //   { //     id:2, //     author:"김경숙", //     content:"하이 2", //     emotion:2, //     created_date : new Date().getTime() //   }, //   { //     id:3, //     author:"아무개", //     content:"하이 3", //     emotion:1, //     created_date : new Date().getTime() //   } // ] function App () {   const [data, setData] = useState([]);   const dataId = useRef(0);   const onCreate =(author, content, emotion) =>{     const created_date = new Date().getTime();     const newItem = {       author,       content,       emotion,       created_date,       id : dataId.current     }     dataId.current += 1;     setData([newItem, ...data]);   };   return (     <div className="App">      <DiaryEditor onCreate={onCreate} />      <DiaryList diaryList={data} />     </div>   ); } export default App;   DiaryEditor.js 파일 import {useRef, useState} from "react";   const DiaryEditor =({onCreate}) =>{   const authorInput = useRef();   const contentInput = useRef();   const [state, setState] = useState({     author: "",     content: "",     emotion: 1   });   const handleChangeState = (e) =>{     setState({       ...state,       [e.target.name]:e.target.value,     });   };   const handleSubmit = () =>{     if(state.author.length < 1){       authorInput.current.focus();       return;     }     if(state.content.length < 5){       contentInput.current.focus();       return;     }     onCreate(state.author, state.content, state.emotion);     alert("저장성공");     // setState({     //   author: "",     //   content: "",     //   emotion: 1,     // });   };   return (     <div className="DiaryEditor">       <h2>오늘의 일기</h2>       <div>         <input           ref={authorInput}           name="author"           value={state.author}           onChange={handleChangeState}                     />       </div>       <div>         <textarea           ref={contentInput}           name="content"           value={state.content}           onChange={handleChangeState}           />       </div>       <div>         <select           name="emotion"           value={state.emotion}           onChange={handleChangeState}           >           <option value={1}>1</option>           <option value={2}>2</option>           <option value={3}>3</option>           <option value={4}>4</option>           <option value={5}>5</option>         </select>       </div>       <div>         <button onClick={handleSubmit}>일기 저장하기</button>       </div>     </div>   ); }; export default DiaryEditor;    

8분에 npm start를 하면 index.js가 실행되어야 하는데   npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead. npm ERR! code EJSONPARSE npm ERR! path D:\22_javascript_training/package.json npm ERR! JSON.parse Unexpected string in JSON at position 199 while parsing '{ npm ERR! JSON.parse "name": "package-example1", npm ERR! JSON.parse "versi' npm ERR! JSON.parse Failed to parse JSON data. npm ERR! JSON.parse Note: package.json must be actual JSON, not just JavaScript. npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\82108\AppData\Local\npm-cache\_logs\2022-06-20T17_04_20_353Z-debug-0.log   이런식으로 에러가 떠서 해결방법이 궁금합니다

API 호출하기 강의에서 질문드립니다.   async function getData(){ //fetch 자바스크립트에서 이런식으로 api호출을 할수 있도록 도와주는 내장함수       let rawResponse = await fetch("https://jsonplaceholder.typicode.com/posts");       let jsonResponse = await rawResponse.json();       console.log(jsonResponse);   }     여기에서 async 라는것은 별도의 자바스크립트 명령인지요? fetch 앞에 붙은 await 도 기능이 있는 자바스크립트 명령인지요?  

너무 막연한 질문일수도 있는데요! 리엑트 공부하면서 이후 리엑트 네이티브까지 공부하려고 합니다. 물론 자바스크립트는 다 공부해야겠지만...  시간이 많지 않습니다. 혹시 강의 내용 의외에도 앞으로 리엑트를 좀 더 깊게 공부하려면 이런 내용까진 추가로 자바스크립트를 공부하고 리엑트를 진행해야한다면 자바스크립트에서 어떤것들을 추가로 공부를 하고 리엑트 공부를 해야할까요? 

데모사이트 접속이안되는데 확인부탁드려요

강의에서쓰이는 ppt공유가능한가요? 개인적으로 정말좋은거같아서 ppt자료 얻고싶습니다

React에서 배열 사용하기2 - 데이터 추가하기  강의에서 아래와 같은 코드를 작성하시는데 id는 왜 그냥 dateId.current를 하지 않고 id : dateId.current로 수행되는지 궁금합니다.   const dateId = useRef(0);   const onCreate = (author, content, emotion) => {     const create_date = new Date().getTime();     const newItem = {       author,       content,       emotion,       create_date,       id: dateId.current,     };     dateId.current += 1;     setDate([newItem, ...date]); // 새로작성한 item이 가장 먼저 들어가도록   };

# 의문 - 리액트에서 배열 사용하기 1 - 리스트 렌더링 (조회) 강의 중 12분 쯤 - 리액트에서 props를 내려줄 때 undefined 값일 수도 있는데 그 때 defaultProps 문법을 사용해도 되지만 ? 문법을 사용해도 코드가 동작합니다. 두 개 중 선택할 때 뭘 기준으로 선택하는지 궁금합니다.  - 참고: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining   ```javascript=   {<h4>{diaryList ? diaryList.length : 0}개의 일기가 있습니다.</h4>}   DiaryList.defaultProps = {     diaryList: [], } ```

안녕하세요 선생님 혹시 리액트를  npx로 생성할때 뒤에 이름을 정하는데 4글자이상적으면 계속오류가 뜨는데 이건 어떤 경우 일까요 3글자 까지는 정상적으로 생성됩니다,,

궁금한게 하나 생겻습니다. 06:55 부분의 내용인데요 만약에 정말 많은 데이터가 존재한다고 생각하면 그런 경우에는 어떻게 하는지 궁금합니다. 많은 데이터가 있는데 그중에 무조건 filter로만 건지게 되면 어찌되었든 filter 연산이 발생하는 거잖아요? 글을 조회시에 단순히 그 글의 key값만 가지고 db에서 조회를 해와서 상세 내용을 보여주는것을 일반적으로 생각하고 있는데  react같은 경우에는 그렇게 하지는 않고 useEffect를 이용해서 filter로만 걸러야 하는지가 궁금합니다.  만약에 이 방법이 그냥 우리가 backend서버가 현재 없어서 연습용으로 그렇게 하는 것이라면 실제로 별도의 backend 서버와 연동시에는 어떤 식으로 조회를 하는건가요? 제가 위에서 아는 방식으로 동일하게 진행하나요?

안녕하세요! 강의 잘 듣고 있었는데요 저도 윗 분들 처럼 일기 작성 후에 네비게이트로 페이지 이동까지는 되는데 작성한게 업데이트가 안됩니다 ㅠㅠ   https://codesandbox.io/s/blazing-sun-kyl8yt?file=/src/components/EmotionItem.js

안녕하세요! 해당 강의를 다 마치고, 사진과 같이 onCreate 함수 내부에서 data를 콘솔로 출력해보니 data 값을 읽어오지 못하는데 그 이유가 뭘까요?? data.length와 같은 작업을 진행하고 싶은데 어떻게 접근해야 할지 모르겠어서 질문 남깁니다 !  

https://ko.reactjs.org/docs/hooks-faq.html#how-to-memoize-calculations   위 공식문서에서 조금 아래로 내려가면 useMemo로 컴포넌트를 다시 렌더링하는 경우도 나옵니다. function Parent({ a, b }) { // 'a'가 변경된 경우에만 다시 렌더링 됩니다: const child1 = useMemo(() => <Child1 a={a} />, [a]); // 'b'가 변경된 경우에만 다시 렌더링 됩니다: const child2 = useMemo(() => <Child2 b={b} />, [b]); return ( <> {child1} {child2} </> ) } 이런식으로 나오는데 둘의 동작은 동일하다고 봐도 되나요? React.memo는 useMemo와 다르게 바로 컴포넌트로 쓰니까 코드량과 가독성이 좋다는 차이점 밖에 안보여서 질문드립니다~!

안녕하세요.   공식도큐먼트를 봐도 생소하고 어려운 개념들을 실제 코드를 통해 쉽고 친절하게 전달해주셔서 초보자입장에서 감사히 잘 보고 있습니다.   해당 강좌의 소소코드링크가 보이지 않는데 확인부탁드리겠습니다.   감사합니다.

안녕하세요! 강의 듣던 중 궁금한 점이 있어서 질문드립니다. 저번 시간부터 계속 콘솔창에 값이 두 번 출력이 되는데 찾아봐도 중복으로 나올만한 건 없어 보이는데요.. 이유를 모르겠습니다..

안녕하세요 🙋‍♂️25:15초에서 아래와 같이 className을 선언해도 될꺼 같은데 className을 배열로 선언하신 이유를 알고 싶습니다. <button className={`MyButton MyButton_${type}`} >        

기본적인 CSS를 추가하실 때 갑자기 <select> 옆에 "오늘의 감정점수 : " 가 추가되어서 제가 놓쳤나 싶었네요 ㅎㅎ..   다른 분들도 헷갈리시지 않게 강의 밑 소스코드를 참고하시거나 아래 코드를 넣어주시면 편하게 하실듯합니다~ <div> <span>오늘의 감정점수 : </span> <select name="emotion" value={state.emotion} onChange={handleChangeState} > <option value={1}>1</option> <option value={2}>2</option> <option value={3}>3</option> <option value={4}>4</option> <option value={5}>5</option> </select> </div>

만든걸로 이것저것 해보다가 알게되었는데요. 21번째 아이템을 삭제한 후 다시 아이템을 추가하면 22번째 아이템이라고 뜹니다. chapt 15 소스코드는 아예 콘솔에 출력이 안되서 chapt14 소스코드에서 해보니 제목과 같은 현상이 발생해서요.  21번째 아이템을 삭제한후 다시 아이템을 추가하면 21번째 아이템이어야 되는거 아닌가요? 

 화면에 새로고침 할때마다 콘솔 찍은 부분들이 2개씩 항상 찍히던데.. 뭔 이유인지를 모르겠네요..

The media could not be loaded, either because the server or network failed or because the format is not supported.   이런 에러가 나오는데 어떻게 해야하나요? 앞부분 이미 들었는데 이러네요.