목록react (8)
devNyong
/* Remove element Handle @Description : element 제거 */ const removeHandle = e => { const elmnt = e.target.parentElement.parentElement; setData(data.filter((d, i) => i !== parseInt (elmnt.dataset.index) )); } /* DoubleClick Text @Description : 텍스트 두번 클릭 */ const doubleClickHandle = (index, item) => { setData(data.map((d, i) => index === i ? { ...d, activeInput: d.activeInput === false ? true : fal..
사용자정의 Hook 이름은 반드시 use로 시작해야 하는데 그래야만 한눈에 보아도 Hook 규칙이 적용되는지를 파악할 수 있기 때문입니다. state에 새로운 값을 추가할 때 push와 같은 원본 데이터를 변경하는 것은 쓰지 말자. concat과 같은 새로운 데이터를 추가하는 것을 사용하자.(성능 개선할 때 좋고 편하다) 리액트에서는 state내부의 값을 직접적으로 수정하면 안되기 때문! (불변성 유지) push, splice, unshift, pop 같은 내장함수는 배열 자체를 직접 수정하게 되므로 적합하지 않다. 기존 배열에 기반하여 새 배열을 만들어내는 함수인 concat, slice, map, filter와 같은 함수를 사용해야한다. https://recoiljs.org/ko/docs/introd..
const [now,setNow] = useState(new Date()) const [searchParam, setSearchParam] = useState({ yesterday : new Date(now.setMonth(now.getDate() -1 )), tomorrow : new Date(now.setMonth(now.getDate() +1 )), beforeMonth : new Date(now.setMonth(now.getMonth() -1 )), afterMonth : new Date(now.setMonth(now.getMonth() +1 )), beforeYear : new Date(now.setMonth(now.getYear() -1 )), afterYear : new Date(now.se..
const [list,setList] = useState([]); setList((prev) => { let NewData = [...prev] NewData.push(value) return NewData }) { list.map((item, index) => index % 10 == 0 && index != 0 ? ( {item}x ) : ( {item}x ) ) } const removeWord = (e) => { const newArr = list.filter(function(element, index) { return index !== parseInt (e.target.parentElement.dataset.id ) }) setList(newArr); }
import CustomConfirmAlert from "../components/modal/CustomConfirmAlert"; import {confirmAlert} from "react-confirm-alert"; import * as customUI from "../styles/customUI"; /* @type : '' , SUCCESS, ERROR @param : type , title , t ,func @Description: 저장,수정,삭제 완료 alert */ export function confirmCompleteUtil (type,title,t,func) { confirmAlert({ closeOnEscape: false, // esc 키 눌러서 닫기 여부 closeOnClickOut..
import React, { useState , useEffect , useMemo } from 'react'; import logo from './logo.svg'; import ReactTable from "./reactTable"; import Paging from "./paging"; import './App.css'; function App() { const [page , setPage] = useState(1); const [count , setCount] = useState(5); const [rows , setRows] = useState(5); /* 처음에 data 가져오기 */ useEffect(() => { fetch("/api/v1/test?page=0&size=5&sort=pidx..
import React, { useState , useMemo } from 'react'; import { useTable } from "react-table"; import logo from './logo.svg'; import ReactTable from "./reactTable"; import './App.css'; function App() { const [number, setNumber] = useState(0); const onIncrease = () => { setNumber(number + 1); } const onDecrease = () => { setNumber(number - 1); } const reactColumns = useMemo( () => [ { accessor: "name..