장바구니 쿠키처리도중 무한루프..

장바구니에 쿠키를 넣는데 무한루프에 빠졌다.

리액트 훅에 익숙치 않아서 벌어진 일이었다.

 

https://kasterra.github.io/preventing-useEffect-infinite-loop/

React의 useEffect에 대한 간단한 설명과 무한루프 예방하기 | Kasterra's Archive

이 블로그를 보고 고민을 계속했다...

 

const [cookies, setCookies] = useCookies(['cart']);
const [cartAdd, setCartAdd] = useState({});
let cartList = [];

//쿠키에 장바구니 담기 함수
const cookieAdd = () => {
  console.log("cookieAdd")
  if (cookies === undefined) {//장바구니 없는 경우
    //앞의 키값은 바꾸지 않기! 은재언니가 씀 뒤에는 변수로 연결
    cartList.push(cartAdd)
  } else {//장바구니 이미 있는 경우
    cartList = [...cookies.cart, cartAdd]
    console.log(cookies);
    console.log(cookies.cart);
  }
  //3600000초 후에 없어지기-장바구니 리셋
  //Date.now() + 259200000의 값을 expires에 할당하면 3일 후 만료되는 쿠키를 설정할 수 있습니다.
  setCookies('cart',
    cartList, { expires: new Date(Date.now() + 259200000) }
  )
}
  
    //쿠키에 상품정보담기
    setCartAdd({
      "marketNum": detailPost.market_no,
      "marketImg": thumbnailUrl,//썸네일
      "marketName": detailPost.market_title,
      "marketOption": "시간선택",//프론트에서 시간선택 처리 할예정-파이어베이스....ㅠㅠ
      "marketCnt": count,//사용자가 선택한 갯수
      "marketPrice": detailPost.market_price
    });

 

 

 

알고보니 위의 상태에서 setCartAdd가 useState로 상태관리가 계속 되고 있는데

setCartAdd가 계속 cookieAdd함수에서 호출되고 있었던것 같다.

 

chatGpt선생님 말씀....

 

안녕하세요! 코드를 보니 cookieAdd() 함수가 상태 업데이트를 일으키고 있습니다. setCartAdd() 함수가 cookieAdd() 함수 내부에서 호출되고 있고, setCartAdd() 함수가 호출될 때마다 cartAdd 상태가 업데이트됩니다. 그러나 cookieAdd() 함수는 상태 업데이트 이후에도 계속 호출되고 있기 때문에 무한 루프에 빠지게 됩니다.

이 문제를 해결하려면 setCartAdd() 함수를 useEffect() 훅 안에서 사용하여 상태 업데이트를 일으키도록 변경하면 됩니다. useEffect() 훅은 컴포넌트가 렌더링될 때마다 실행되므로, setCartAdd() 함수가 호출될 때마다 무한 루프에 빠지지 않습니다.

 

그래서 userEffect 훅으로 변경하고 의존성 배열에다가 쿠키에 넣어주는 값을 모두 넣어 그 값들이 변경될때에 리렌더링 되도록 했다. 

 

const [cookies, setCookies] = useCookies(['cart']);
const [cartAdd, setCartAdd] = useState({});
let cartList = [];

//쿠키에 장바구니 담기 함수
const cookieAdd = () => {
  console.log("cookieAdd")
  if (cookies === undefined) {//장바구니 없는 경우
    //앞의 키값은 바꾸지 않기! 은재언니가 씀 뒤에는 변수로 연결
    cartList.push(cartAdd)
  } else {//장바구니 이미 있는 경우
    cartList = [...cookies.cart, cartAdd]
    console.log(cookies);
    console.log(cookies.cart);
  }
  //3600000초 후에 없어지기-장바구니 리셋
  //Date.now() + 259200000의 값을 expires에 할당하면 3일 후 만료되는 쿠키를 설정할 수 있습니다.
  setCookies('cart',
    cartList, { expires: new Date(Date.now() + 259200000) }
  )
}

useEffect(() => {
  //쿠키에 상품정보담기
  setCartAdd({
    "marketNum": detailPost.market_no,
    "marketImg": thumbnailUrl,//썸네일
    "marketName": detailPost.market_title,
    "marketOption": "시간선택",//프론트에서 시간선택 처리 할예정-파이어베이스....ㅠㅠ
    "marketCnt": count,//사용자가 선택한 갯수
    "marketPrice": detailPost.market_price
  });
}, [count, detailPost.market_no, detailPost.market_price, detailPost.market_title, thumbnailUrl]);

return (
  //컴포넌트 코드...
);

 

수업시간에 선생님이 useState와 useEffect가 마주보고 계속 리렌더링이 일어나면 무한루프 빠져서 망한다고했던것이 기억나기도한다.... 아마도....

 

해결완료^^ 이거때문에 잠을 못잘뻔 했다. 나는 아침형 인간 거의 미라클모닝수준이라 10시면 잠드는데ㅋㅋㅋㅋ...

낼 일찍일어날수있을지ㅎㅎ