내일배움캠프 React_7기 TIL - 19. React 개인과제_Olympic Medal Tracker (2)

Olympic Medal Tracker 과제 완료!

메모제이션 useCallback

: 함수의 결과를 캐시하여 동일한 입력에 대해 불필요한 계산을 줄인다

함수 메모제이션(useCallback)을 통해 컴포넌트 리렌더 상황에서 함수가 불필요하게 재생성되는 것을 막는다.

기존 코드

  const handleTableSort = (value) => {
    let sortedArray = [];
    if (value === "golds") {
      sortedArray = [...dataList].sort(
        (a, b) => Number(b.gold) - Number(a.gold)
      );
    } else if (value === "total") {
      sortedArray = [...dataList].sort((a, b) => {
        const totalA = Number(a.gold) + Number(a.silver) + Number(a.bronze);
        const totalB = Number(b.gold) + Number(b.silver) + Number(b.bronze);
        return totalB - totalA;
      });
    }
    setSortedArray(sortedArray);
  };

useEffect(() => {
    handleTableSort("golds");
  }, [dataList]);

...

return (
    <>
      <label htmlFor="sort">정렬</label>
      <select id="sort" onChange={(e) => handleTableSort(e.target.value)}>
        <option value="golds">금메달순</option>
        <option value="total">총 메달순</option>
      </select>
    ...

함수 메모제이션 없이 사용하고 있는 코드다.
이 경우, 컴포넌트가 리렌더링 될 때마다 handleTableSort 함수가 새로 생성되므로, 해당 함수를 사용하는 자식 컴포넌트는 매번 리렌더링될 수 있다.
즉, 컴포넌트 리렌더 발생 -> 함수 재생성 -> select 요소도 리렌더(불필요!) 의 상황이 발생하기 때문에 성능이 저하될 수 있다.

useCallback 사용 코드

 const handleTableSort = useCallback(
  (value) => {
    // 정렬 로직
  },
  [dataList] // dataList가 변경되지 않는 한 이 함수는 새로 생성되지 않음
);

useEffect(() => {
  handleTableSort("golds");
}, [dataList, handleTableSort]);

useCallback 훅을 사용하여 handleTableSort 함수를 정의한 코드다.
의존성 배열에 dataList를 포함하면, dataList가 변경되지 않는 한 해당 함수는 새로 생성되지 않고 React는 이전에 메모이제이션된 버전의 handleTableSort 함수를 사용한다.