useEffect()

useEffect 의 작동 원리

import React, { useEffect, useRef } from "react";

const useClick = (onClick) => {
  const ref = useRef();
  useEffect(() => {
  	// 1. 컴포넌트가 마운트되었을 때 실행되는 코드
    const element = ref;

    if (element.current) {
      element.current.addEventListener("click", onClick);
    }


    return () => {
    // 2. 컴포넌트가 언마운트되기 전에 실행되는 코드
      if (element.current) {
        element.current.removeEventListener("click", onClick);
      }
    };
  }, []); // 3. 빈 배열은 컴포넌트가 마운트될 떄 한 번만 실행

  if (typeof onClick !== "function") {
    return;
  }
  return ref;
};

export default useClick;

 

1.  마운트(Mount)

Component의 Mount는 React Component가 DOM에 추가되고 화면에 나타나는 과정을 말한다.

Component가 처음 생성되고 DOM에 삽입될 때를 Mount라고 한다.

 

2. 언마운트(unMount) 

Component의 unMount는 React Component가 DOM에서 제거되는 과정을 말한다.

 

3. 의존성 배열 Dependency(deps)

빈 배열 값으로 둘 경우에는 Component가 Mount될 때 한 번만 실행된다.

배열에 값이 있는 경우 해당 상태 값이 변경될 때마다 useeEffect()의 함수가 실행되고, 변경될 때만 실행되는 것이 아니라 처음 Mount 될 때도 실행된다.

 

의존성 배열 자체를 생략한 경우 리렌더링될 때마다 실행된다.

 

 

 

 

 

 

여기서 unMount 될 때 eventListener를 제거하는 이유는 무엇일까?

1. 메모리 정리

2. 성능 최적화

 

eventListener는 DOM 요소에 대한 참조를 가지고 있다.

Component가 unMount가 됐음에도 불구하고 eventListener가 남아있다면 해당 Component가 더 이상 필요하지 않더라도 메모리에서 해제되지 않을 수 있다.

불필요한 메모리가 발생하고, 성능적으로 문제가 될 수있다.

 

useEffect 훅에서 반환(return)하는 함수는 Component가 unMount되기 전에 실행되는 clean-up 함수다.