useEffect

useEffect의 동작 원리

• useEffect 첫 번째 파라미터 함수가 호출되는 시점
  • (1) 컴포넌트가 첫 렌더링 되는 시점
  • (2) dependency array의 각 element의 값이 변경되었을 때
• dependency array의 각 element의 값이 변경되는지 판단하는 시점은 언제일까?
  • 컴포넌트가 랜더링 될 때마다 선언해 놓은 useEffect함수가 실행된다.
  • dependancy array의 각 element와 비교(===)한 뒤 다르면 첫 번째 파라미터 함수를 호출하는 구조
  • dependency array를 비교하려면 useEffect함수가 실행이 되어야 한다.

1. (재)랜더링
2. useEffect함수 호출 (파라미터로 콜백함수, dependency array 전달)
3. 이전 dependency array와 비교. 다른점이 발견 될 시 콜백 호출

export const useEffect = (function () {
  let prevDependencyArray = [];
  return (callback, dependencyArray) => {
    for (const i in dependencyArray) {
      if (dependencyArray[i] !== prevDependencyArray[i]) {
        prevDepedencyArray = dependencyArray;
        callback();
        return;
      }
    }
  };
})();