[react] input onChange() 에 lodash debounce 적용 샘플
onChange={_.debounce((o: any) => handleChange(o, etc), 500)}
Category Archives: React
에러 메시지 피드백(alert, toast 유형)에 lodash debounce 적용 사례
개요 react axios 공통화 작업(interceptor 등)을 하던 중, 에러 메시지 알림에 debounce 처리를 해야 하는 요건이 발생. 소스 axios-settings.ts (커스텀 파일) /** * axios 기본설정 */ const axiosOpts = { // timeout: 5000, // headers: { // "Content-Type": "application/json", // }, }; // export const ax = Axios.create(axiosOpts); // /** * axios response interceptor */… Read More »
[React] SWR 조회시 무한루프에 걸렸던 사례 (useSWR, infinite loop)
모듈 상단에서 아래의 swr함수를 호출하는데, useMemo()가 불필요하다고 생각되어 제거했더니 무한루프가 걸렸었음. swr의 args로 들어가는 url string이 함수 내부에서 생성되어 계속 변경이 되니 무한루프가 발생했던 것이었음. 결국 useMemo()를 다시 사용하여 해결 function useSWR(type: string, query?: any) { const url = useMemo(() => { switch(type){ case '1': return '/board/01'; case '2': return '/board/02'; default: return null; }… Read More »