JavaScript/React with Error18 [해결 방법] TypeError: Cannot read properties of undefined (reading 'isLoggedIn') ⚛️ 기본 환경: IDE: VS code, Language: React 발생 Error React에서 다음 Source Code를 실행할 경우, 1 2 3 4 5 6 7 8 9 10 return ( {!isLoggedIn && } {isLoggedIn && } ); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 const Navigation = (props) => { return ( {(ctx) => { return ( {ctx.isLoggedIn && ( Users )} ); }} ); }; 🚨 다음과 같은 오류 발생 TypeError: Cannot read properties of undefined (reading 'isLoggedIn') 발생 원인 Rea.. 2023. 6. 3. [해결 방법] Encountered two children with the same key ⚛️ 기본 환경: IDE: VS code, Language: React 발생 Error React에서 다음 Source Code를 실행할 경우, 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 const App = () => { const [courseGoals, setCourseGoals] = useState([ { text: "Do all exercises!", id: "g1" }, { text: "Finish the course!", id: "g2" }, ]); const addGoalHandler = (enteredText) => { setCourseGoals((prevGoals) => { const updatedGoals = [.... 2023. 6. 1. [해결 방법] A complete log of this run can be found in: ⚛️ 기본 환경: IDE: VS code, Language: React 발생 Error React를 실행하고자, 터미널에서 다음 명령어를 입력할 경우, 🚨 다음과 같은 Error 발생 npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\user\AppData\Local\npm-cache\_logs\2023-05-24T01_17_19_007Z-debug-0.log 발생 원인 React 파일이 존재하지 않은 경로에서 npm 설치 시도 해결 방법 React 파일이 존재하지 폴더로 이동 후 npm 설치 + 올바른 경로에서 npm install 시, 동일한 error가 발생 했을 경우, 참고 자료 [Npm Error] A complete .. 2023. 5. 24. [해결 방법] TypeError: Cannot read property 'rating' of undefined ⚛️ 기본 환경: IDE: VS code, Language: React 발생 Error React에서 다음 Source Code를 실행할 경우, ⚠️ 다음과 같은 Error 발생 TypeError: Cannot read property 'movie' of undefined 발생 원인 getMovie()에 사용되는 API JSON데이터 구조는 다음과 같음 해당 객체 전체를 json으로 받고 rating을 추출하고자할 경우, data.data.movie.rating으로 접근할 수 있으나 객체가 로드되지 않은 상태에서 접근 시 TypeError 발생 해결 방법 1. ?.(Optional Chaining) 연산자를 사용하여 객체 체인 중간에 있는 속성 또는 메서드에 접근하기 전에 해당 값이 존재하는지 확인하고,.. 2023. 5. 21. [해결 방법] Adjacent JSX elements must be wrapped in an enclosing tag ⚛️ 기본 환경: IDE: VS code, Language: React 발생 Error React에서 다음 Source Code를 실행할 경우, ⚠️ 다음과 같은 Error 발생 Adjacent JSX elements must be wrapped in an enclosing tag 발생 원인 React에서 컴포넌트는 하나의 최상위 엘리먼트만 반환할 수 있음 → React에서 JSX 구문을 JavaScript 코드로 변환할 때, return 구문에서 여러 개의 최상위 엘리먼트를 반환하면 컴파일 오류 발생 해결 방법 select 엘리먼트와 input 엘리먼트를 하나의 최상위 엘리먼트에 포함 2023. 5. 18. [해결 방법] TypeError: Cannot read property 'map' of undefined ⚛️ 기본 환경: IDE: VS code, Language: React 발생 Error React에서 다음 Source Code를 실행할 경우, ⚠️ 다음과 같은 Error 발생 TypeError: Cannot read property 'map' of undefined 발생 원인 첫 렌더링시 state 값을 받아오지 못해 undefined가 입력되어 오류 발생 해결 방법 const [data, setData] = useState({}); 에 초기값으로 빈객체 선언 참고 자료 📑 React 실행오류 Cannot read property 'map' of undefined 2023. 5. 15. 이전 1 2 3 다음
