생명주기란 참 어렵다.. 카테고리를 선택하고 해당 카테고리에 대한 리스트를 api를 통해 받아와 보여주는 작업 중에, 버그를 발견했다.

카테고리를 바꾼 후, 스크롤 후에 다시 다른 카테고리를 선택하니, 이전 카테고리에서 받아와졌던 리스트가 그대로 위에 쌓여서 렌더링 되는 문제였다.

처음에는 카테고리가 바뀔때 마다 라는 조건으로 useEffect를 주었지만, 반응하지 않았다.

이번 PJT를 하면서 뼈저리게 느낀 점은,

React는 잘못이 없다. 단지 내가 잘못 코드를 짠 것이니 천천히 돌아보자

였다.

useEffect(() => {
    // Update the isMounted variable to true to make sure the component is still mounted

    urlId === 1
      ? // 요청
        getAskArticleList("", "", categoryToUse, cnt, 15, 0, 1, "").then((res) => {
          const data = res;
          setOriginalArticle(data[0]);
          setArticles(data[0]);
          setList("물품 요청 목록");
        })
      : // 공유
        getShareArticleList("", "", categoryToUse, cnt, 15, 0, 1, "").then((res) => {
          const data = res;
          setOriginalArticle(data);
          setArticles(data);
          setList("물품 공유 목록");
        });
  }, [categoryToUse]);
  useEffect(() => {
    // Check if the component is still mounted before making the API call

    urlId === 1
      ? // 요청
        getAskArticleList("", "", categoryToUse, cnt, 15, 0, 1, "").then((res) => {
          const data = res;
          setOriginalArticle([...originalArticle, ...data[0]]);
          setArticles([...originalArticle, ...data[0]]);
          setList("물품 요청 목록");
        })
      : // 공유
        getShareArticleList("", "", categoryToUse, cnt, 15, 0, 1, "").then((res) => {
          const data = res;
          setOriginalArticle([...originalArticle, ...data]);
          setArticles([...originalArticle, ...data]);
          setList("물품 공유 목록");
        });
  }, [search, pathname, isAll, cnt]);

결국 생각해낸 방법은(옆에서 조언을 해준) 렌더링 될 때 마다 값을 초기화 해주는 것이다. 다만, 아직 refactorin해야할 부분이 있는 것이, 현재 '공유가능한 물품만 보기'를 클릭하면 해당 값이 있는 것만 보여주어야 하는데, setArticles만으로 하면 전체데이터 자체가 바뀌어서 setOriginalArticle을 추가한 상태였다.

즉, 처음에는 setArticles이지만 이후에는 setOriginalArticles를 통한 리스트의 변화가 일어나는 것이다.

그래서 다음과 같이 문제를 해결했다.

 function receiveCategory(newCategory) {
    setCategory(newCategory);
    setCnt(0);
    setOriginalArticle([]);
  }

카테고리를 받아올 때 마다 cnt(페이지 숫자)와 빈리스트를 받아와서 렌더링 하게 하는 방법으로 해결하였다.