useEffect

 

 

useEffect

 

 

리액트의 대표적인 Hook들에는

사이드 이펙트를 처리하는 useEffect,

컴포넌트의 상태를 관리하는 useState,

React Context를 구독하는 useContext 등등 많은 Hook들이 있다.

 

useEffect는 React Hook 중 하나로, 함수형 컴포넌트에서 사이드 이펙트(side effects)를 처리하기 위해 사용된다.

사이드 이펙트란 데이터 페칭(API 호출), 구독 설정(이벤트 리스너), DOM 수동 조작, 타이머 설정(setTimeout, setInterval), 로컬 스토리지 접근, 외부 라이브러리 사용 등 컴포넌트의 렌더링과 직접적인 관련이 없는 작업들을 말한다.

 

---

 

기본 문법

 

 

기본 문법은 useEffect(setup, dependencies?)로 이루어져 있다.

 

주요 매개변수로는

setup에는

Effect의 로직이 포함된 함수, 선택적으로 cleanup(정리) 함수를 반환할 수 있음

컴포넌트가 DOM에 추가된 후 실행됨

 

dependencies(의존성 배열)에는

선택적 매개변수, Effect가 다시 실행되어야 하는 값들의 배열이 온다

 

먼저 useEffect를 import 하고 컴포넌트의 return문보다 위에서 useEffect를 사용한다.

useEffect에는 2개의 인수를 전달한다. (1.함수 2.배열)

useEffect의 첫 번째 인수로 전달한 함수는 콜백 함수다. 이 함수는 컴포넌트가 렌더링 된 이후에 호출된다.

useEffect의 두 번째 인수는 의존성 배열이다. 여기선 sideEffect가 의존하는 모든 값을 포함해야 한다.

 

 

1. 기본

useEffect(
  // 첫 번째 인자: setup 함수
  () => {
    // Effect의 로직
  },
  // 두 번째 인자: 의존성 배열 (선택사항)
  []
);

 

2. 실제 예시

useEffect(
  // setup 함수
  () => {
    console.log('Effect 실행');
    return () => {
      console.log('cleanup 실행');
    };
  },
  // 의존성 배열
  [count, name]
);

 

3. 의존성 배열

// 1. 의존성 배열이 없는 경우
useEffect(() => {
  console.log('매 렌더링마다 실행');
});

// 2. 빈 의존성 배열
useEffect(() => {
  console.log('마운트될 때만 실행');
}, []);

// 3. 의존성이 있는 경우
useEffect(() => {
  console.log('의존성 값이 변경될 때만 실행');
}, [count, name]);

 

4. props, state 사용 예시

const MyComponent = ({ userId, userName }) => {
  const [count, setCount] = useState(0);

  useEffect(
    // setup 함수
    () => {
      console.log(`userId: ${userId}, count: ${count}`);
      return () => {
        console.log('cleanup');
      };
    },
    // 의존성 배열에 props와 state 포함
    [userId, count]
  );
};

 

5. 비동기 예시

useEffect(
  // setup 함수
  async () => {
    try {
      const response = await fetch(`https://api.example.com/users/${userId}`);
      const data = await response.json();
      console.log(data);
    } catch (error) {
      console.error(error);
    }
  },
  // 의존성 배열
  [userId]
);

 

6. 이벤트 리스너 예시

useEffect(
  // setup 함수
  () => {
    const handleScroll = () => {
      console.log('스크롤 이벤트 발생');
    };

    window.addEventListener('scroll', handleScroll);
    
    // cleanup 함수 반환
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  },
  // 빈 의존성 배열 - 마운트/언마운트 시에만 실행
  []
);

 

7. 여러 의존성 예시

useEffect(
  // setup 함수
  () => {
    const timer = setInterval(() => {
      setCount(prev => prev + 1);
    }, 1000);

    return () => {
      clearInterval(timer);
    };
  },
  // 여러 의존성
  [count, isActive, delay]
);

 

 

---

 

 

주의사항

 

1. 무한 루프

useEffect(() => {
  setCount(count + 1); // 무한 루프 발생
}, [count]);

 

컴포넌트가 렌더링되고 useEffect가 실행이 됐지만 setCount로 상태가 업데이트 되고 이로 인해 컴포넌트가 다시 렌더링된다.

그럼 cout값이 변경되었으므로 useEffect가 다시 실행되고 다시 setCount로 상태가 업데이트 되고 다시 컴포넌트 렌더링.. 무한 루프에 빠지게 된다.

 

해결방법

useEffect(() => {
  setCount(prevCount => prevCount + 1);
}, []); // 의존성 배열 비움

 

 

2. 의존성 배열 누락

useEffect(() => {
  console.log(count); // 의존성 배열에 count 누락
}, []);

 

3. cleanup 함수 사용 주의

useEffect(() => {
  const subscription = someAPI.subscribe();
  return () => subscription.unsubscribe(); // cleanup 필수
}, []);

 

 

 

 

 

---

 

출처 : https://ko.react.dev/reference/react/useEffect