재귀함수 결과값 useMemo로 재렌더링 방지

문제

트리구조 데이터
 

interface Data {
  id: string;
  children: Data[];
}

export const data: Data = {
  id: "상위1",
  children: [
    {
      id: "하위1",
      children: [
        { id: "하위1-1", children: [{ id: "하위1-1-1", children: [] }] },
        { id: "하위1-2", children: [] },
      ],
    },
    { id: "하위2", children: [] },
  ],
};

 
현재 클릭하는 아이템의 id는 상태값으로 관리하고 있다. 해당 아이템을 누르면 id 상태값이 바로 변경된다. 
 

  const [currentId, setCurrentId] = useState(data.id);

 
 
 
그 변경된 id를 가지고 트리 구조의 데이터에서 해당 id값을 가지고있는 아이템을 재귀함수를 이용해서 찾는다.
트리구조 데이터의 경우 재귀함수를 이용하면 id 값만 가지고 해당 데이터 자체를 찾아 모든 속성값을 가져올 수 있어 유용하다. 
 

 //재귀함수
  const findItemByCurrentId = (data: Data, currId: string) => {
    //base case
    if (data.id === currId) {
      return data;
    }
    //recursive case
    if (data.children.length > 0) {
      for (const item of data.children) {
        const foundItem = findItemByCurrentId(item, currId);
        if (foundItem) {
          return foundItem;
        }
      }
    }
  };

 
 

이슈사항

재귀함수로 찾은 현재 아이템 데이터를 관리하기 위해 currentItem이라는 상태값을 하나 더 만들어야 된다고 생각했다.
그리고 useEffect 훅을 사용해서 현재 id인 currentId가 변경될때마다 setCurrentItem 함수로 새롭게 재귀함수로 찾은 아이템 데이터를 상태로 저장했다. 
 

  const [currentItem, setCurrentItem] = useState<Data>();
  
  useEffect(() => {
    setCurrentItem(findItemByCurrentId(data, currentId));
  }, [currentId]);
  
  console.log(currentItem);

 
그런데 이 경우 콘솔에 기존 아이템과 새로운 아이템이 동시에 찍혔다.
하위2에 있다가 하위1-2를 누르면, 기존 하위2가 찍히고 동시에 바로 이어서 하위1-2가 찍히는 문제였다. 
결국 현재 클릭한 id 상태값이 바뀌면서 화면이 재렌더링되는 것인데, 재귀함수 호출이 되기 이전에 저장되어있는 기존 아이템이 렌더링되고, 연산시간이 비교적 소요되는 재귀함수 호출이되고 난 후에 새로운 아이템이 상태로 새로 저장되고 또 다시 렌더링되는 것이라고 이해했다. 
 

 

해결 

 
그렇다면 연산에 약간의 시간이 소요되는 재귀함수의 결과값을 상태로 저장하는 것이 아니라, memoize시킨 결과값을 저장한다면 재렌더링에 대한 문제를 해결할 수 있겠다는 생각이 들었다. 
하기 예제와 같이 useMemo hook을 사용해서 함수 연산의 결과값을 memoizedCurrentItem 이라는 변수에 할당했다. 
 

  const memoizedCurrentItem = useMemo(
    () => findItemByCurrentId(data, currentId),
    [currentId]
  );
  console.log(memoizedCurrentItem, "메모값");

 
이제 id 상태값이 바뀔때마다 재귀함수 계산 결과값인 해당 아이템 데이터의 캐싱된 결과값이 저장된다.
따라서 id 상태값이 변경되는 속도가 더 빠르고 재귀함수의 연산 속도가 더 느린 경우에도, 이미 저장되어있는 재귀함수의 결과값이 동일한 경우에는 렌더링을 하지않고,  아이템 데이터의 결과값이 새로 달라지는 경우에만 재 렌더링이 되는 것을 확인할 수 있었다.