프로그램/React-Native (11) 썸네일형 리스트형 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); 리액트 정규식 간단한 체크 로직만들때 유용한 리액트 정규식 정리해봤습니다. / * 숫자만 */ /^[0-9]+$/ / * 특수문자 제외 */ /^[a-zA-Z0-9ㄱ-ㅎㅏ-ㅣ가-힣]+$/ / * 한글만 */ /^[ㄱ-ㅎㅏ-ㅣ가-힣]+$/ / * 영어만 */ /^[a-zA-Z]+$/ / * 한글+영어 */ /^[ㄱ-ㅎㅏ-ㅣ가-힣a-zA-Z]+$/ / * 이메일 *//[^a-zA-Z0-9@._-]+/ / * 샘플소스 *///영어가 아니면 확인되는 소스if (!/^[a-zA-Z]+$/.test(event.target.value)) { event.preventDefault(); event.target.value = event.target.value.replace(/[^a-zA-Z]+/g, '');} .. React 타임워치 (Stopwatch) React에서 타임워치( Stopwatch )를 구현하는 방법을 설명하겠습니다. 이 구현은 useState와 useEffect 훅을 사용하여 시간 상태를 관리하고, 타이머를 시작하고 중지하는 기능을 포함합니다.타임워치 컴포넌트 구현상태 관리: 시간을 초 단위로 저장하기 위한 상태와 타이머의 작동 여부를 저장하기 위한 상태를 만듭니다.타이머 제어: 타이머를 시작, 중지, 리셋하는 기능을 구현합니다.UI 업데이트: 시간이 업데이트될 때마다 화면에 표시합니다.import React from 'react'; import Stopwatch from './Stopwatch'; const App = () => { return ( React Stopwatch ); }; .. 이전 1 2 다음