Skip to main content

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

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;
}