react Lifecycle , useEffect 안에 addEventListener

React Lifecycle

한빛미디어 - 06강 State와 생명주기에서 가져옴

 

mounting -> 태어나는 것 , component가 화면에 표시될 때  render 후 componentDidMount실행 

updating -> update의 원인, state를 변경하는 것이 update 이다.  (setstate)

unmounting - > 페이지를 바꿀 때 component 가 죽는 것 

 

 

React에서 window나 document에 addEventListener를 통해 이벤트를 추가할 때, 그냥 사용하게 되면 렌더링 시점이 구분이 되지 않기 때문에 에러가 난다. useEffect를 이용해서 최초 로드 시에 이벤트를 추가해주면 이벤트 감지가 시작되어 에러를 일으키지 않는다.

 

마우스에 움직임을 감지하는 js코드를 react에 집어넣으려고 했더니 그냥 집어넣으면 에러가 발생했다. 

  useEffect(() => {
    let cursorBig = document.querySelector(".big");
    let cursorSmall = document.querySelector(".small");

    document.addEventListener("mousemove", function (e) {
      let x = e.clientX;
      let y = e.clientY;
      
      cursorSmall.style.left = x + "px";
      cursorSmall.style.top = y + "px";

      cursorBig.style.left = x + "px";
      cursorBig.style.top = y + "px";
    });

 
  }, []);

  return (
    <div>
      {/* 마우스 커서 스타일 */}
      <div>
        <div class="cursor small"></div>
        <div class="cursor big"></div>
      </div>
      
      </div>
  );

  useEffect () hook을 활용하니 에러가 사라졌다. 

 

 

1. useEffect의 콜백함수를 통해 document 객체에 addEventListner가 이벤트를 바인딩한다. 
2. useEffect는 최초 렌더링이 끝나고 나서 실행된다.
3. useEffect 내부에 addEventListner로 실행되는 이벤트를 감지하는 감시자가 있다.