React useEffect() 정리

개요

useEffect(() => {
  handleLoad();
}, []);

 

해석:

1. useEffect 내부의 함수 () => { handleLoad(); }는 컴포넌트가 마운트될 때 실행됩니다.
2. **의존성 배열 []**이 비어 있으므로, handleLoad()는 한 번만 실행됩니다.
3. handleLoad()는 사용자가 정의한 함수로, 데이터를 로드하거나 초기화 작업을 수행하는 함수일 가능성이 큽니다.

useEffect() 개요

useEffect()는 React의 훅(Hook) 중 하나로, 컴포넌트의 라이프사이클 동안 부수 효과(side effects)를 처리할 때 사용됩니다.

 

1.기본 문법

useEffect(() => {
  // 실행할 코드
});

→ 컴포넌트가 렌더링될 때마다 실행됨

 

2.의존성 배열(Dependency Array) 사용

useEffect(() => {
  // 실행할 코드
}, [dependency]);

→ dependency가 변경될 때만 실행됨

 

3.다양한 실행 패턴

(1) 마운트 시 1회 실행

useEffect(() => {
  console.log("컴포넌트가 마운트됨");
}, []);

의존성 배열([])이 비어 있음 → 처음 한 번만 실행됨

 

(2) 특정 값이 변경될 때 실행

useEffect(() => {
  console.log(`count가 변경됨: ${count}`);
}, [count]);

 

(3) 언마운트 시 정리(Cleanup)

useEffect(() => {
  const interval = setInterval(() => {
    console.log("타이머 실행 중");
  }, 1000);

  return () => {
    clearInterval(interval);
    console.log("타이머 정리");
  };
}, []);

컴포넌트가 제거(unmount)될 때 실행

 

요약

 

• useEffect(() => {}) → 렌더링될 때마다 실행
• useEffect(() => {}, []) → 마운트 시 1회 실행
• useEffect(() => {}, [value]) → value가 변경될 때 실행
• useEffect(() => { return () => {} }, []) → 언마운트 시 정리(Cleanup) 수행

➡ 비동기 데이터 로딩, 이벤트 리스너 등록, 타이머 설정 등에 주로 사용됨.