반응형 javascript14 [ 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 리스트 엘리먼트에서 key 값의 중복이 발생하게 되면서 나타나는 에러 메시지입니다.React는 엘리먼트를 렌더링 할 때.. 2024. 10. 11. [React] JSX란? 아주 쉽게 총 정리(+코드, 그림) 📄 JSX란?JavaScript에 HTML 태그를 끼얹은 문법JSX = JavaScript + HTMLHTML 태그 안에선 중괄호({})를 사용해서 JS를 쓸 수 있다.JavaScript의 공식 문법이 아니며, JavaScript의 확장 문법이다. 🖥️ 소스 코드로 이해하기const count = 1;const title = {count}번째 게시물다음 코드는 title 이라는 변수에 {count}번째 게시물을 선언한 코드입니다.즉, JavaScript 문법(const title)에 HTML 태그()를 끼얹은 JavaScript의 확장 문법입니다. 📄 JSX의 특징JSX에서 사용되는 태그의 속성 이름이 HTML과 조금 다름class -> classNamefor -> htmlForonclick ->.. 2024. 10. 8. [React] 실시간으로 input 값을 숫자만 입력 받는 방법 다음 예제를 통해 실시간으로 input 값을 어떻게 숫자만 입력받을 수 있는지 살펴봅시다.다음은 HTML의 Form과 input을 사용해서 상품 코드를 숫자만 입력 받는 관리자 페이지입니다. 요구 사항상품 코드는 숫자로만 이루어져 있습니다.상품 코드를 입력하는 도중에 숫자가 아닌 문자를 입력하면 input 요소 밑에 error 메시지를 나타내며, '등록' 버튼을 비활성화 합니다.상품 코드를 정상적으로 등록하면 "상품 코드가 등록되었습니다."라는 메시지와 등록된 상품 코드를 나타냅니다. 1. HTML 구조 설계div (Form)forminput / buttondiv (Modal)divspan / p컴포넌트는 상품 코드를 입력할 수 있는 form 컴포넌트, 안내 메시지를 보여주는 modal 컴포넌트를 사용합.. 2024. 10. 3. 이전 1 2 3 4 다음 반응형
