반응형 Java38 [ React ] Cannot read properties of null (reading 'map') 오류 원인 및 해결 방법 💥 Chrome 개발자 도구에서 발생한 에러 메시지Uncaught TypeError: Cannot read properties of null (reading 'map') ❓에러 발생 이유현재의 오류 메시지는 null 타입의 변수를 대상으로 map 메서드를 사용했을 때 나타나는 오류 메시지입니다. 👉 React의 렌더링 흐름아래 코드에서 console.log를 통하여 users를 출력해 보겠습니다.import React, { useEffect, useState } from "react";function UserPage() { const [users, setUsers] = useState(null); useEffect(() => { fetch("https://jsonplaceholder.typi.. 2024. 10. 14. [ React ] Uncaught TypeError: users.map is not a function 오류 해결 방법 💥 Chrome 개발자 도구에서 발생한 에러 메시지Uncaught TypeError: users.map is not a function ❓에러 발생 이유JavaScript의 map 메서드는 Array 타입의 변수를 대상으로 실행되는 함수입니다.하지만 Array 타입이 아닌 자료형의 변수를 대상으로 해당 메서드를 사용할 경우에 나타나는 오류 메시지입니다. 👉 React의 렌더링 흐름아래 코드에서 console.log를 통하여 users를 출력해 보겠습니다.import React, { useEffect, useState } from "react";function UserPage() { const [users, setUsers] = useState(""); useEffect(() => { fetc.. 2024. 10. 14. [React] Warning: Encountered two children with the same key 오류 해결 방법 🚨 Chrome 개발자 도구에서 발생한 에러 메시지Warning: Encountered two children with the same key, `1`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.❓에러 발생 이유React는 React 엘리먼트를 렌더링 할 때 Diffing이라는 작업을 진행합니다.그러기 위해서는 유니크한 Key 값이 필요합니다.하지만, 유니크한 Ke.. 2024. 10. 11. 알기 쉽게 정리한 JSX란? JSX란?JavaScript에 HTML 태그를 끼얹은 문법HTML 태그 안에선 중괄호({})를 사용해서 JS를 쓸 수 있다.JavaScript의 공식 문법이 아니며, JavaScript의 확장 문법이다.아래와 같이 JavaScript 문법 (const title)에HTML () 태그를 끼얹은 JavaScript의 확장 문법입니다.const count = 1;const title = {count}번째 게시물 리액트 엘리먼트란? 예시 코드const count = 1;const title = {count}번째 게시물 위 title 변수에 담은 태그는 리액트 엘리먼트라고 부릅니다. 즉, 리액트에서 UI를 렌더링 하기 위한 가장 작은 단위입니다. 참고로 브라우저는 JSX 문법을 알지 못합니다.그렇기 때문에 아.. 2024. 10. 8. 이전 1 2 3 4 5 6 ··· 10 다음 반응형
