프로그램/React-Native (13) 썸네일형 리스트형 JSX expressions must have one parent element.ts 원인 해결방법 * 리액트 하다보면 비슷한 에러 보셧을거에요. 특히 다른 화면에서 동작하는거 그대로 복사 붙여넣기 하는 경우 .. 제가 그러다 이 에러를 만났네요:JSX expressions must have one parent element.tsJSX expressions must have one parent element 에러는 JSX 리턴 부분에 최상위 태그가 두 개 이상 있을 때 발생합니다.즉, 리턴하는 블록에 과 가 나란히 있는 게 원인입니다.해결방법은 간단 합니다.둘을 하나로 감싸주면 됩니다. 방법은 두 가지:1. ... Fragment 사용2. 부모 ... 로 감싸기 리액트 엔터값 변환 처리 방법 리액트(React)에서 엔터(\n) 값을 변환하는 방법은 여러 가지가 있습니다.주로 줄바꿈 처리를 할 때 사용되며, HTML에서 태그로 변환하는 방식이 일반적입니다.1️⃣ replace()를 사용해 태그로 변환문자열의 \n을 태그로 변환하여 JSX에서 렌더링합니다.jsx복사편집const TextWithLineBreaks = ({ text }) => { return p dangerouslySetInnerHTML={{ __html: text.replace(/\n/g, "br />") }} />; }; 📌 주의: dangerouslySetInnerHTML을 사용할 경우 XSS(보안) 문제에 주의해야 합니다.2️⃣ split("\n")을 사용하여 줄바꿈 처리split("\n")을 사용하여 배열로 나눈 후.. react의 for 대신 사용하는 .forEach 에서 validation .forEach에서 **유효성 검사(Validation)**를 적용하려면, 각 요소를 순회하며 조건을 확인하고 필요한 로직을 실행할 수 있습니다. 아래는 .forEach를 활용하여 데이터를 검증하는 몇 가지 예를 보여드립니다. 1. 배열의 값이 특정 조건을 만족하는지 확인 ** 소스const numbers = [10, 20, 5, -3, 25]; numbers.forEach((num) => { if (num console.log(`유효하지 않은 값: ${num}`); } else { console.log(`유효한 값: ${num}`); } }); **. 결과 유효한 값: 10 유효한 값: 20 유효하지 않은 값: -3 유효한 값: 25 2. 유효하지 않은 값만 따로 저장** 소.. 리액트 엑셀파일업로드 (같은 이름의 엑셀파일 재업로드) /* 리액트 파일업로드 기본소스 액셀업로드가 있다면 event.target.value 부분을 초기화 하면 같은 이름의 파일 재업로드 가능해짐*/ import React, { useState } from 'react'; import * as XLSX from 'xlsx'; const ExcelUpload: React.FC = () => { const [excelData, setExcelData] = useState([]); const handleFileUpload = (event: React.ChangeEvent) => { // event: React.ChangeEvent ==> 엑셀업로드 파일명이 다른 경우에만 적용 (안에 내용이 바뀌어도 적용이 인식이 안됨) const file = e.. 리액트 년월 차이 계산 자바스크립트 리액트 년월 차이 계산 자바스크립트 //시작일자, 종료일자 넣고 조회하는 함수 const getYearMonthDifference = (startDate, endDate) => { const start = new Date(startDate); const end = new Date(endDate); let years = end.getFullYear() - start.getFullYear(); let months = end.getMonth() - start.getMonth(); // 만약 월 차이가 음수면, 연도에서 1을 빼고 월을 보정합니다. if (months years -= 1; months += 12; } return { years, months };.. Missing "key" prop for element in iterator react/jsx-key //댓글 목록 소스 ctxts.map((file: any) => ( {file.wrtrNo}(gdhong) 2024-01-01 09:19:34 )) 이런오류가 발생The error you're seeing (Missing "key" prop for element in iterator) occurs when rendering a list of elements in React, and each element in the list doesn't have a unique key prop. This is required by React to efficie.. nameSearch 에러 recognize the nameSearch prop on a DOM element recognize the nameSearch prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase namesearch instead. If you accidentally passed it from a parent component, remove it from the DOM element. ==> React에서는 DOM 요소에 전달된 props 중, HTML 표준 속성이 아닌 커스텀 속성이 자동으로 걸러지거나 경고가 발생할 수 있습니다. 예를 들어 nameSearch와 같은 커스텀 속성은 표준 HTML 속성이 아니므로 직접 DOM에 적용하려고 하면.. date.isValid is not a function 리액트 date.isValid is not a function 은 DatePicker를 사용할때 에러가 발생했는데요. 데이터를 조회하고 세팅시 날짜의 형식 문제가 발생했습니다. //날짜 관련 라이브러리 import import dateUtil from '@/utils/core/dateUtil'; import dayjs from 'dayjs'; //실제 데이터 조회결과를 날짜를 세팅하고 사용합니다. const testYmd = '20240909' ;dateUtil.toDayjs(testYmd); 이전 1 2 다음