programming/React (23) 썸네일형 리스트형 [React Custom Hook] 수동으로 새로고침한 경우에만 특정 함수를 trigger 시키는 hook(url Params 삭제) (useDeleteUrlParamsWhenManualRefresh) 1. 수동으로 새로고침한 경우에만 특정 함수를 trigger 시키는 hook(url Params 삭제) 로컬스토리지와 beforeunload 이벤트 사용 input 삭제할 url parms key list 참조 How to detect refresh event in browser ReactJS Window: beforeunload event React | How to detect Page Refresh (F5) useDeleteUrlParamsWhenManualRefresh.ts 코드 // input 삭제할 url parms key list import { useEffect } from "react"; import { useSearchParams } from "react-router-dom"; expor.. [React Custom Hook] Form 의 required field 확인하는 hook (useFormValidation) 1. Form 의 required field 확인하는 hook input fromRef: 타겟 Form element formDataState : 관리되는 form 데이터 state submitFlag : 제출 버튼 눌렀는지 여부 output isFormValidated : validation 통과 되었는지 boolean useFormValidation.ts 코드 import { useEffect, useState } from "react"; // input : formRef, 제출할 formData, submitFlag // output : 통과 여부 export const useFormValidation = ({ formRef, formDataState, submitFlag }) => { const .. [React Custom Hook] Resize 될 때마다 현재 window 의 width가 breakpoint 보다 up 인지 down 인지 물어보는 hook (useResizeBreakpoints) 1. Resize 될 때마다 현재 window 의 width가 breakpoint 보다 up 인지 down 인지 물어보는 hook input : 없음 output breakpoints : up / down 메소드를 가지고 있는 객체 useResizeBreakpoints.ts 코드 import { useState, useEffect } from "react"; interface GridBreakpoints { xs: number; sm: number; md: number; lg: number; xl: number; xxl: number; } interface Breakpoints { up: (bp: keyof GridBreakpoints) => boolean; down: (bp: keyof GridBrea.. [React Custom Hook] 타겟 element 가 viewport 안에 보이는지 판단하는 hook (useVisibilityObserver) 1. 타겟 element 가 viewport 안에 보이는지 판단하는 hook input element: 관찰하고자 하는 타겟 element React.ref rootMargin : 관찰 타겟 주위의 여백, new IntersectionObserver() 생성자에, option 으로 들어가는 값. 예시. "10px 20px 30px 40px" (위, 오른쪽, 아래, 왼쪽). 값은 백분율이 될 수 있습니다. 기본값은 0. 타겟 주변의 여백도 포함해서, 그 여백까지 타겟으로 보고, viewport 에서 사라졌는지 판단함. IntersectionObserver.option.rootMargin 더보기 output isVisible : 해당 타겟이 현재 viewport 안에 보이는지 여부 boolean. obser.. [React Custom Hook] async 로 Mock Data 제공하는 hook (useFakeFetch) 1. async 로 Mock Data 제공하는 hook input resolvedData: 제공할 mock data waitingTime : setTimeout 기다리는 시간, 몇 초 후 리턴 output { loading, setLoading, data, setData } : 로딩, 리턴받는 데이터 state useFakeFetch.ts 코드 import { useEffect, useState } from "react"; interface FakeFetchResult { loading: boolean; setLoading: React.Dispatch; data: T[]; setData: React.Dispatch; } const useFakeFetch = (resolvedData: T[], waitin.. useQuery enable (false) 비활성화 일때 isLoading = true 인 이슈 useQuery 를 사용하면서 특정 조건에 따라서 query 를 실행/미실행 하려고 한다 const { data, error, isLoading } = useQuery( ["test", "detail", id], () => getDetail({ id }), {enabled: !!id} ) id가 있을 때만 query 요청하기 조건 기준이 되는 값은 반드시 queryKey 에 포함이 되어있어야 enabled 가 작동된다 id 가 없어서 query 요청을 안하는 경우인데도 isLoading = true 로 설정되어, 로딩 스피너가 계속 돌았다. 이에 대한 해결책은 react-query v4에서 isInitialLoading이라는 새로운 인자를 반환해준다. react-query 공식 문서에서 isInitial.. useEffect 마운트 되었을때는 실행하지 않고, dependancies 가 실제로 변경된 경우에만 실행 시키기 // 최초 마운트시 실행 되지 않고, dependencies 가 실제 변경된 경우에만 실행 const didMount = useRef(false); useEffect(() => { if (didMount.current) { setValue("connectProductId", null); } else didMount.current = true; }, [watch("countryId")]); blob/json 형태로 리턴받은 데이터를 엑셀 파일로 추출하기(Get 방식 /Post 방식) 목적 : 테이블 데이터를 엑셀로 Export 방법1) 프론트에서 처리 -> UI 상 보여지는 테이블 데이터를 그대로 엑셀 추출 방법2) 백엔드에서 처리 -> 프론트에서 가공되지 않은 원본 데이터를 추출 1. 프론트 처리 엑셀 처리를 위한 라이브러리 사용 https://www.npmjs.com/package/xlsx xlsx SheetJS Spreadsheet data parser and writer. Latest version: 0.18.5, last published: 2 years ago. Start using xlsx in your project by running `npm i xlsx`. There are 4148 other projects in the npm registry using xlsx... 무한 스크롤 구현기(React, Scrollevent, Throttle, Intersection Observer API) 목표 : React 에서 무한 스크롤 구현하기 (Infinity Scroll in React) 여정 : scroll Event Listener -> Throttle 로 최적화 -> Intersection Observer API 사용 1. 단순 구현 스크롤 이벤트를 참조하여 다음 데이터 API 호출 코드 구현 가정 fetchData() 는 API 를 요청하는 함수 예제에서는 console.log('fetch API 요청') 찍히는 걸로 API 요청을 대신함 useEffect(() => { const handleScroll = () => { const { scrollTop, offsetHeight } = document.documentElement; if (window.innerHeight + scrollT.. 개발환경에서 CORS 에러 관련 프록시 설정 프론트 : localhost:3000 띄워서 로컬에서 개발 API서버(백) : http://~.com dev서버를 올려서 해당 dev 서버에 요청 브라우저에서 보내는 요청 → CORS 발생 브라우저는 localhost:3000을 달고 있는데, 다른 주소(API서버)로 부터 온 응답값을 허용하지 않음 (동일출처가 아니기 때문) 해결책 : 브라우저에서 나가는 요청을 API 서버 주소로 둔갑시킨다 proxy 설정 http-proxy-middleware 패키지 설치 src/setupProxy.js api/ 로 시작하는 요청 url 인 경우 설정한 target 주소에서 요청하는 것으로 둔갑해줌 /api 부분은 빠져야 하므로 pathRewrite 도 시켜준다 const { createProxyMiddleware }.. 이전 1 2 3 다음
