useState로 적용해둔 기본값이 있더라도 처음에는 api Get 요청이 되지 않게 useRef를 써서 해보자.

박영은·2024년 9월 6일
0
  const [currentPage, setCurrentPage] = useState(1);
  const [rowPerPage, setRowPerPage] = useState<number>(25);
  const [selectedItem, setSelectedItem] = useState<ItemProps | ''>('');
  const [selectedCategory, setSelectedCategory] = useState({
    cateId: '',
    cateName: '',
  });

.
.
.

  const prevRef = useRef({ //  비교 값 저장
    currentPage,
    selectedItem,
    selectedCategory,
    rowPerPage,
  });

  useEffect(() => {
    const prevValues = prevRef.current; // 현재 값으로 비교값을 넣음

    const checkChanged = // state 값과 현재 값을 비교함.
      currentPage !== prevValues.currentPage ||
      selectedItem !== prevValues.selectedItem ||
      selectedCategory !== prevValues.selectedCategory ||
      rowPerPage !== prevValues.rowPerPage;

    if (checkChanged) { // 비교한 값이 하나라도 다르면 get요청 실행.
      getGoodsList(
        currentPage,
        selectedCategory.cateId,
        selectedItem !== '' ? selectedItem.itemId : undefined,
        searchText
    }

    prevRef.current = { // ref 현재값을 state값으로 저장.
      currentPage,
      selectedCategory,
      selectedItem,
      rowPerPage,
    };
  }, [
    currentPage,
    selectedCategory,
    selectedItem,
    rowPerPage,
  ]);

profile
Front-end

0개의 댓글