React

React에서 useEffect는 어떻게 이루어져있나?

milliwonkim 2023. 3. 9. 22:22
반응형
SMALL
function useEffect(callback, dependencies) {
  const previousDependencies = useRef(dependencies);

  // Call the callback function if dependencies have changed
  
  if (!areDependenciesEqual(previousDependencies.current, dependencies)) {
    callback();
  }

  // Update the previous dependencies
  
  // useRef를 이용해서 이전 값을 기억하기 때문에
  // previousDependencies가 바뀌어도 리렌더링 되지 않습니다.
  previousDependencies.current = dependencies;
}

// 두 deps array가 같은지 체크하는 Helper function

// arr1은 이전 deps array
// arr2는 현재 deps array
function areDependenciesEqual(arr1, arr2) {
  // deps array가 아예없거나
  // 이전 deps array와 현재 deps array가 같다면
  // 위의 callback function을 트리거한다
  if (arr1 === undefined || arr2 === undefined || arr1.length !== arr2.length) {
    return false;
  }

  // 이전 deps arr[i]와 현재 deps arr[i]가 하나라도 다르다면
  // 위의 callback function을 트리거한다
  for (let i = 0; i < arr1.length; i++) {
    if (arr1[i] !== arr2[i]) {
      return false;
    }
  }
  
  // 이게 다 아닐경우 
  // 위의 callback function을 트리거하지 않는다
  return true;
}
반응형
LIST