이번 프로젝트는 crossRef API 를 사용하여 쿼리query검색을 통해 원하는 데이터를 얻고,

특정 논문에 대한 메타데이터를 얻을 수 있었다.

편리한 대신 너무 느린 속도 빠르면 13초, 느리면 30초 이상까지 때문에

재귀적으로 호출하여 D3 그래프를 그리는 나의 프로젝트에서는 꽤 큰 이슈였다.

특히나 한번 호출한 데이터를 계속해서 재사용 할 수 있는 것이 중요했다.

useMemo를 사용하는 것이 베스트였지만, 로직이 복잡해서 우선은 수작업분류(…)를 통해

리렌더링을 막아주어야 한다.

이때 ViewPage.jsx 컴포넌트와 PaperNodeCard.jsx 컴포넌트의 clickStar 를 유심히 확인해야 한다.

ViewPage.jsx

  useEffect(() => {
    const currentPaperList = paperCollection[collectionId];

    const getReferences = async (currentPaperList) => {
      const getReferencesPromiseList = currentPaperList.map((paper) => {
        return axios.get(`${API.CROSSREF_WORKS_URL}/${API.PAPER_URL}/${paper.doi}`);
      });

      const allResponse = await Promise.all(getReferencesPromiseList);
      const allReferencesList = allResponse.map((res) => {
        if (res?.data?.status !== "ok") {
          return;
        }

        const response = res?.data?.message;

        return formattingResponse(response);
      });

      const rootNode = formattingRoot(allReferencesList, currentCollectionName);

      fetchChildrenNodes(rootNode, initChart, collectionId);
    };

    if (!isCurrentPaperListExist) {
      navigator("/");
    }

    if (currentPaperList && isDataExist && !isSameData) {
    실제로는 이것과 다르게 하긴 해야 하는데, 
    currentPaperList에는 이전에 fetch한 데이터들이 그대로 있다.
    이들을 유지하되 새로운 데이터만 fetch하도록 작성하고, 이를 initChart에 root로 포맷팅 하여 전달.
      console.log("refact");
      const currentRoot = rootCollection[collectionId];
      const newRoot = { ...currentRoot, children: currentPaperList };
      initChart(collectionId, newRoot);
    } else if (currentPaperList && !isDataExist || !isSameData) {
      console.log("fetch!");
      getReferences(currentPaperList);
    }
  }, [paperCollection]);