개요 가변적으로 row가 추가되는 동적 UI에서 각 컴포넌트의 데이터 초기화, focus 등을 수행하기 위해 ref 가 필요한 사례가 있었음. (ref 배열, array) 소스 const testRefs = useRef<any>([]); … <Input ref={ (el) => (testRefs.current[idx] = el) } … /> … const ref = testRefs.current[idx]; …
onChange={_.debounce((o: any) => handleChange(o, etc), 500)}
개요 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 »
모듈 상단에서 아래의 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 »
