랜더링 시 fetch 횟수를 줄이는 방법

Question

공휴일 데이터를 fetch를 사용해서 db에서 가져와서 달력을 출력하면 날짜에 공휴일이 표시되도록 기능을 구현하였습니다.문제는 랜더링 시 fetch호출이 2번 일어나게 되고시작날짜 input 클릭시 fetch 1번종료날짜input 클릭시 fetch 2번이렇게 4번 fetch가 일어나게 됩니다프로그램 속도에서는 느려짐이 체감되지 않는데이걸 최소한으로 줄여볼수 있을까해서 context에서 useEffect를 사용하여 공휴일데이터를 전역적으로 테스트해보니 undefined로 출력이 됩니다.import DatePicker from "react-datepicker"; import { ko } from "date-fns/locale"; import { getMonth, getYear } from "date-fns"; import "react-datepicker/dist/react-datepicker.css"; import * as common from "../service/Service"; import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/24/outline"; import { useEffect, useState } from "react"; CustomDatepicker.jsx //기존 방식 const CustomDatepicker = ({ field }) => { const now = new Date(); const [year, setYear] = useState(now.getFullYear()); const years = common.range(1990, now.getFullYear() + 5); let holidays = []; const getHoliday = async () => { const tmp = await common.getHoliday({ YEAR: `${year}` }); if (tmp.code === 201 && tmp.result) { holidays = tmp.result; } }; useEffect(() => { //년도에 따라 getHoliday(); }, [holidays]); ... }CommonContext.jsx export const CommonContext = createContext(); const CommonProvider = (props) => { const now = new Date(); const [year, setYear] = useState(now.getFullYear()); const [list, setList] = useState([]); const listhandle = (data) => { setList(data); }; let holidays = []; const getHoliday = async () => { const tmp = await common.getHoliday({ YEAR: `${year}` }); if (tmp.code === 201 && tmp.result) { holidays = tmp.result; } }; useEffect(() => { //년도에 따라 getHoliday(); }, [holidays]); return ( //하위 컴포넌트에서 holidays 출력시 undefined {props.children} ); } export default CommonProvider;어떤 방식으로 수정하면 fetch횟수를 줄일수 있을까요?선배님들의 노하우나 팁 부탁드립니다.

codezzzz · Accepted Answer

useEffect(() => { //년도에 따라 getHoliday(); }, []);

풍월상신(가니메디안) · Answer

fetch 등 비용이 높은 계산은 메모이제이션 해서 사용하거나 react-query 등 최적화된 라이브러리를 사용하게 됩니다. const getHoliday = useMemo(async () => { const tmp = await common.getHoliday({ YEAR: `${year}` }); if (tmp.code === 201 && tmp.result) { return tmp.result; } return null; // .. }, [year]);메모이제이션 문제가 리액트에서 가장 불만인 부분이죠. React19 에서 컴파일러(React.Forget) 가 도입된다는 소문에 모두들 기대했지만 공식 트윗에서 이를 부인했어요.컴파일러는 다다음 버전에서나 기대할 수 있을 것 같고, 앞으로도 한동안은 {메모이제이션 == 좋은 습관} .. 이렇게 설득 당해야 할 것 같습니다.TLDR; 비용이 드는 계산이나 fetch 같은 요청은 useMemo, useCallback, memo 등으로 메모이제이션 해서 사용한다. 끗

랜더링 시 fetch 횟수를 줄이는 방법

2개의 답변

Q&A 목록