1. useEffect의 종속성 배열에 객체를 넣으면 객체의 참조 변화 여부에 따라 무한 루프 문제가 발생

구현 시나리오

1. 로컬스토리지에 저장된 cart 데이터로 db에 저장된 product 데이터를 가져오기 useCartProducts hook 사용
2. 가져온 cartProducts 데이터 중에서 수량이 0인 상품을 제외하고 validProducts에 저장 → hook에서 데이터 필터링을 하지 않는 이유 : 리스트에서 품절된 상품도 보여주되, 선택 및 구매는 불가능하게 끔 하기 위해
3. validProducts 데이터를 selectedItems 에 저장해서 페이지에 접근했을때 상품이 선택된 상태로 보여줌 useSelection : 리스트를 전달하면, 아이템의 선택 관련 이벤트를 처리해주는 hook

발생한 문제점

useEffect에서 cartProducts와 validProducts 와 데이터가 변경되면 상태를 업데이트 하도록 처리하는 과정에서 무한루프가 발생함

코드

// CartList.tsx
****
const { cart, removeSelectCart, toggleCart, updateCartIsBuy } = useCart();
const { cartProducts, isError } = useCartProducts(cart);

const [validProducts, setValidProducts] = useState<(Cart & Product)[]>([...cartProducts.filter((item) => item.productQuantity !== 0)]);

const { selectedItems, setSelectedItems, toggleItemSelection, toggleAllItemSelection } = useSelection(validProducts);

useEffect(() => {
  setValidProducts([...cartProducts.filter((item) => item.productQuantity !== 0)]);
}, [cartProducts])

useEffect(() => {
  setSelectedItems(validProducts.map((item) => item.id))
}, [validProducts])

해결

원인 : cartProducts 배열이 변경될 때마다 useEffect가 실행되는데 cartProducts.filter() 메서드를 호출하면 항상 새로운 배열이 생성되기 때문에 이 배열의 참조값이 변경되어 무한 루프가 발생

해결 : 의존성 배열을 cartProducts 배열 자체가 아니라 cartProducts.cartProducts로 변경해 배열의 길이가 변경될 때만 감지하도록 함

useEffect(() => {
  const validItems = cartProducts.filter((item) => item.productQuantity !== 0);
  setValidProducts(validItems);
}, **[cartProducts.length]**);

2. useEffect의 종속성 배열에 객체를 넣으면 무한 루프 문제가 발생

구현 시나리오

tosspayments로 결제를 완료 하면 successUrl로 지정한 페이지로 이동하게 된다.