mui grid 내에서 비동기 작업이 필요할 경우 (e.g. axios)
renderCell 하위 부분을 custom component화 해서 useEffect나 useQuery를 사용하자.
Category Archives: React
react에서 lodash debounce의 적용시 팁
꼭 이벤트핸들러에 딱 붙여서 하지 않아도 된다. FC body에서 debounce를 씌운 함수에, useCallback을 씌우고 변수로 할당하면 된다. debounce의 모든 영역에서 useCallback을 씌우는 것이 핵심이다!!
react 에서 hook을 호출할 수 없는 상황일 경우
함수를 주입받는 것도 생각해 보자.
react에서 js로 children 을 재귀 탐색하는 것은 불가능 한 듯.
냉무
yup 으로 custom function 사용시 yup.matches() 말고 yup.test()를 사용하자.
matches()는 메시지의 type이 matches()로 고정되고, react-hook-form에서 errors 배열을 추출할 대 구조가 달라서 문제가 된다.
[react query] 즉시 새로운 데이터를 가져오기
방법 1 queryClient.invalidateQueries({ queryKey }); await queryClient.refetchQueries({ queryKey }); // 데이터를 즉시 새로 가져옴 두 개의 함수를 호출해야 한다는 것, await 에도 주의하자. 방법 2 refetch(); // 데이터를 새로 가져오고 useQuery의 결과를 업데이트 지금 새로운 데이터를 fetch 하지 않아도 되는데, 캐시는 확실히 지워야 할 경우 e.g.) edit modal 닫을 때 cache clear queryClient.removeQueries({ queryKey });… Read More »
react-hook-form의 FormProvider와 storybook을 함께 사용하는 preview 샘플코드
기존에 preview.ts를 사용하고 있었다면, preview.tsx 로 rename. preview.tsx import type { Preview } from "@storybook/react"; import React from "react"; import { FormProvider, useForm } from "react-hook-form"; import "../src/index.css"; /** * 각 컴포넌트에 react-hook-form 이 결합되어 있어서 * storybook 화면에서 에러를 방지하기 위해 global FormProvider wrapping을 수행. */ const formDecorator = (Story) => { const methods… Read More »
[react-hook-form] useFormContext 장점
Context 라는 이름에서 유추할 수 있듯이, form이 다른 컴포넌트를 포함하고 있다면 해당 컴포넌트의 input까지 register를 내려서 묶을 수 있다.
[vite 4] vite에서 moment/locale이 정상 작동하지 않는 문제
import 구문을 dist 포함으로 변경해 주어야 한다. Replace import ‘moment/locale/ru’; with import ‘moment/dist/locale/ru’;
[react] NiceModal의 useModal() 은 toastGrid 와 충돌을 일으킨다 (냉무)
[react] input, textarea 등에서 영어 입력을 영대문자(uppercase)로 변환해 주는 샘플코드
커서 위치를 유지하는 것이 포인트 … onChange={(e) => { modifyUpperCase(e, forceUpperCase); }} … export const modifyUpperCase = (e: React.ChangeEvent<any>, forceUpperCase: boolean) => { if (forceUpperCase) { const et = e.target; const selectionStart = et.selectionStart; const selectionEnd = et.selectionEnd; et.value = et.value.toUpperCase(); // 조건에 따라 영대문자 변경 et.setSelectionRange(selectionStart, selectionEnd); // 커서 위치 유지를 위한 작업 }
[react] 자식 컴포넌트를 강제 리렌더링 하는 방법 (child component, re-render, programmatically)
react component가 공통적으로 갖고 있는 key 속성을 활용한다. number state를 하나 만들어서 key 속성에 바인딩 state 가 change (예: +1) 될 때마다 re-render
[react-hook-form] form.watch vs useWatch (성능을 위해서는 useWatch 고려)
환경 "react-hook-form": "^7.34.0" 개요 form.watch 사용시, 모든 form 컴포넌트를 리렌더링하기 때문에, 성능에 영향을 미치는 경우가 있었음. useWatch는 re-rendering의 범위를 단위 컴포넌트 내로 제한하며, 필드명으로 범위를 또 제한할 수가 있었음. 샘플 코드 // fromDate, toDate 두 개의 props를 받는 datepicker에서의 작업예시 const watchVals = useWatch({ control: form.control, name: [fieldName, fieldName2 || 'dummy'] }); 위 샘플에서는 control,… Read More »
[react/swiper] 첫 번째 슬라이드(swiper slide)에만 effect(e.g. fade)가 적용되지 않았던 문제
React 18의 strict mode 때문이었음
[react-hook-form] form.setError() 를 해도 formState.errors 에 바로 업데이트 되지 않는다. (다음번 호출 때 확인할 수 있음) – 해결 안됨…
왤까? 왜 그러는 것일까?
[react] 배열(array)로 된 상태(state)의 요소(element) 일부를 수정했는데, 상태변화가 감지(인지/인식)되지 않는 경우 (change not applied)
배열의 요소를 변경한 후, 배열의 사본을 set 해야 한다. array1 이라는 state라면 => […array1] 로 적용
[react-router-dom v6] 페이지 이동(route, navigate)시 보이지 않는 데이터(파라미터)를 담아서 이동하는 방법 (useLocation > state)
이동 전 페이지 const navigate = useNavigate(); const goErrorPage = (errMsg: ReactNode) => { navigate('/error', { state: { errMsg } }); }; // 이후 goErrorPage('블라블라') 호출 이동 후 페이지 const { state } = useLocation(); … return <> <h2>{state.errMsg}</h2> </>
[react/펌글] 외부 자바스크립트 파일을 동적으로 로딩 하기 (loading external javascript file dynamically in react)
원문 출처 https://betterprogramming.pub/loading-third-party-scripts-dynamically-in-reactjs-458c41a7013d script loader as a module const loadGMaps = (callback) => { const existingScript = document.getElementById('googleMaps'); if (!existingScript) { const script = document.createElement('script'); script.src = 'https://maps.googleapis.com/maps/api/js'; script.id = 'googleMaps'; document.body.appendChild(script); script.onload = () => { if (callback) callback(); }; } if (existingScript && callback) callback(); }; export default loadGMaps; 적용 import React, {… Read More »
[react/mui] 모달(modal) 호출시 스크롤바가 사라졌다가, 모달을 닫으면 다시 생기는 문제로 인해(jumping scrollbar) 화면이 흔들리는 이슈
환경 react 18 @mui/material: 5.11.2 @mui/base의 Modal 컴포넌트를 사용하여 모달 구현 개요 mui의 데모 페이지에서는 모달이 뜬다고 해서 이런 현상이 발생하지 않았다. 우리 사이트의 레이아웃 특성상 발생하는 문제인 것 같다. 헤더(GNB) 영역이 좌우로 왔다갔다 하는 것이 눈에 거슬림 해결 /** * jumping scrollbar issue 해결방안 * * 1) 모달이 뜨면 스크롤바가 사라지면서 header부가 우측으로 밀리고,… Read More »
[react] 컴포넌트 함수 body 내에서 랜덤문자열(random string)을 상수(constants)화 하기 (useMemo)
useMemo를 사용하는 것을 왜 생각 못하고 엉뚱한 곳을 헤멨을까? const randomId = useMemo(() => nanoid(6), []);