코드스테이츠 솔로 프로젝트 중!!!
유저가 북마크한 상품만 모아두는 북마크 페이지를 구현하면서 이런 에러를 만났다.

key 중복 문제라길래 제일 먼저 redux store를 2개 관리하고 있는게 생각이 나서 처음에 계속 원인을 그쪽으로만 생각했다.

그래서 첫번쨰로 시도해본 방법으로는 두개 컴포넌트에서 key를 다르게 줘봤다.

나의 시도 1: 어느 store에서 데이터를 가져오는지에 따라 key를 다르게 줘보자.

ProductsList.tsx

  .
  .
(중략)
<Item key={"All" + item.id}>
  .
  .

BookMarkList.tsx

  .
  .
(중략)
<Item key={"Bookmark" + item.id}>
  .
  . 

하지만 여전히 해결 불가!

원인을 다른 쪽으로도 생각해보았다.

ProductsList에서 axios로 서버에서 데이터를 받고 있고, 데이터를 받을 때마다 dispatch로 store에 전달한다. 그 쪽 원인이 유력하다고 짐작하기 시작했던 이유는 북마크 페이지를 들어갔다가 오거나 홈 화면에 들어갔다가 다시 돌아올 때 에러가 나는 것을 알게 되었기 때문이다.

useEffect의 의존성 배열을 []로 설정해서 컴포넌트가 최초 렌더링 될 때만 서버에서 데이터를 가져오도록 했는데, 페이지를 다른 곳으로 이동했다가 다시 돌아올 때마다 재렌더링이 되어서 데이터를 또 가져온다는 사실이 원인이었다.

그래서 2번째 시도

나의 시도 2: products store가 비어있을 때만 데이터를 가져오자.

  if (products.length === 0) {
  useEffect(() => {
      axios
        .get("http://cozshopping.codestates-seb.link/api/v1/products")
        .then((response) => {
          dispatch(storeAllProducts(response.data));
        })
        .catch((error) => {
          console.log(error);
        });
      }, []);
    }

그런데 이렇게 했더니 새로운 에러가 나를 반겼다.
에러 안녕~!~!

useEffect는 조건부로 실행되면 안된다..? 그것은 몰랐습니다 브라우저 선생님..!!!

나의 시도 3: 조건 분기를 useEffect 내부에서 해보자.

  useEffect(() => {
      if (products.length === 0) {
      axios
        .get("http://cozshopping.codestates-seb.link/api/v1/products")
        .then((response) => {
          dispatch(storeAllProducts(response.data));
        })
        .catch((error) => {
          console.log(error);
        });
      }
    }, []);

해결 성공!!

아 쇼핑몰 만드는 솔로 프로젝트 넘나 재밌다 ㅎㅎㅎㅎㅎ
북마크 기능은 처음 구현해보는데 아주 재밌다!!
다시 뚝딱뚝딱 만들러갑니다 화이팅!!