useEffect

 

useEffect는 React의 함수형 컴포넌트에서 side Effect를 수행하기 위해 사용되는 훅이다. 

기본적으로 컴포넌트의 첫 번째 렌더링 이후에 실행되며, 그 이후의 모든 업데이트에서 수행된다. 

두번째 인수인 의존성 배열에 값을 넣으면 이 값이 변경될 때만 재실행된다. 

 

의존성 배열에 객체를 넣으면 객체의 값이 똑같더라도 계속 재실행된다. 객체의 참조값을 추적하기 때문이다. 

따라서 매번 새로운 객체를 생성하므로 useEffect는 매번 실행된다. 이를 해결하기 위해서는 객체의 특정 속성을 의존성 배열을 넣는다.

 

import React, { useState, useEffect } from 'react';

function ExampleComponent() {
  const [data, setData] = useState({ key: 'value' });

  useEffect(() => {
    console.log('Effect ran because data.key changed');
  }, [data.key]); // data.key가 변경될 때만 effect 실행

  return (
    <div>
      <button onClick={() => setData({ key: 'value' })}>Update data</button>
    </div>
  );
}

 

배열도 마찬가지이다. 배열의 내용이 동일하더라도, 배열의 참조가 변경이 되기 때문에 불필요한 재생이 반복된다. 이를 해결하기 위해서는 배열의 내용을 비교하여 불필요한 재실행 방지가 가능하다. 

import React, { useState, useEffect } from 'react';

function ExampleComponent() {
  const [items, setItems] = useState([1, 2, 3]);

  useEffect(() => {
    console.log('Effect ran because items changed');
  }, [JSON.stringify(items)]);

  return (
    <div>
      <button onClick={() => setItems([1, 2, 3])}>Update Items</button>
    </div>
  );
}

 

 

useEffect에서 클린업을 하는 이유는?

컴포넌트가 언마운트되거나 의존성이 변경될 때, 메모리 누수와 불필요한 작업을 방지하기 위해서이다. 클린업 함수는 리소스를 해제하고, 이벤트 리스너를 제거하며, 타이머를 정리하는 등의 작업을 수행한다. 

useEffect(() => {
        // 스크롤 이벤트를 추가
        const childDiv = document.getElementById("child");
        const navDiv = document.querySelector('.nav-box');
        navDiv.style.display="none";
        childDiv.addEventListener("scroll", handleScroll);
        return () => {
          // 컴포넌트가 언마운트될 때 이벤트 리스너 제거
          navDiv.style.display="flex";

          childDiv.removeEventListener("scroll", handleScroll);
        };
      }, []);