useEffect (유즈이펙트)

 

🟡 useEffect

함수형 컴포넌트에서 사이드 이펙트(Side Effect)를 처리하는 Hook이다.

(사이드 이펙트란 컴포넌트의 렌더링 외부에서 발생하는 작업을 의미한다.)

 

◼️ 주요 특징

• API 호출
• 이벤트 리스너 등록 및 제거
• 타이머(setTimeout, setInterval) 설정 및 해제
• DOM 직접 조작
• localStorage 접근

 

◼️ 기본 문법

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

  return () => {
    // 정리(Cleanup) 함수
  };
}, [dependencies]);

• 첫 번째 인수: 실행할 함수.
• return: 정리(Cleanup) 함수.
• 두 번째 인수: 의존성 배열. (Dependencies)

 

◼️ 실행 방식

1️⃣ 마운트 시 한 번만 실행

의존성 배열을 빈 배열([])로 전달하면 컴포넌트가 처음 렌더링될 때만 실행된다.

useEffect(() => {
  console.log("Mount");
}, []);

• 주요 사용: 초기 API 호출, 이벤트 리스너 등록, 초기 데이터 설정.

 

2️⃣ 특정 값이 변경될 때 실행

의존성 배열에 값을 넣으면 해당 값이 변경될 때마다 실행된다.

useEffect(() => {
  console.log(count);
}, [count]);

//여러 값을 감시할 수도 있다.
useEffect(() => {
  console.log("실행");
}, [count, user]);

• 주요 사용: state 변경 감지, props 변경 감지, 특정 데이터 변경 후 추가 작업.

 

3️⃣ 렌더링될 때마다 실행

의존성 배열을 생략하면 모든 렌더링마다 실행된다.

useEffect(() => {
  console.log("Render");
});

• state가 변경되어 다시 렌더링될 때마다 실행되므로 불필요한 실행이 발생할 수 있어 주의해야 한다.

 

◼️ Cleanup 함수 (정리)

return으로 함수를 반환하면 다음 useEffect가 실행되기 전 또는 컴포넌트가 언마운트될 때 실행된다.

useEffect(() => {
  // 타이머 설정
  const timer = setInterval(() => {
    console.log("실행");
  }, 1000);

  // 정리 함수
  return () => {
    clearInterval(timer);  // 타이머 해제
    console.log('타이머가 정리되었습니다!');
  };
}, []);

• 주요 사용: 이벤트 리스너 제거, 타이머 해제, 구독(Subscription) 해제, 네트워크 요청 정리.

👉 Cleanup을 사용하면 메모리 누수를 방지할 수 있다.

 

◼️ 비동기 작업

useEffect 자체를 async로 작성하면 안 된다. 대신 useEffect 내부에서 비동기 함수를 만든 뒤 호출하는 방식으로 사용한다.

useEffect는 반환값으로 undefined 또는 정리 함수(cleanup function) 만 반환해야 하는데, async 함수는 항상 Promise를 반환하기 때문에 사용할 수 없다.

useEffect(() => {
  async function fetchData() {
    const response = await fetch("/api/data");
    const data = await response.json();

    setData(data);
  }

  fetchData();
}, []);

• fetchData()는 API에서 데이터를 비동기로 가져온다.
• await를 사용해 응답을 받은 후 데이터를 상태(setData)에 저장한다.
• 의존성 배열([])이 비어 있으므로 컴포넌트가 처음 마운트될 때 한 번만 실행된다.

 

◼️ 생명주기와의 관계

useEffect는 클래스형 컴포넌트의 라이프사이클 메서드와 비슷한 역할을 한다.

클래스형 컴포넌트	useEffect
componentDidMount	useEffect(() => {}, [])
componentDidUpdate	useEffect(() => {}, [state])
componentWillUnmount	return () => {}

 

 

📍 POINT 📍

✔️ useEffect 내부 코드는 컴포넌트의 렌더링이 끝난 후 실행된다. ✔️

✔️ 렌더링과 직접 관련이 없는 작업을 useEffect에서 처리하면 초기 화면을 먼저 표시한 뒤 부가적인 작업을 수행할 수 있다. ✔️

✔️ 의존성 배열에는 Effect에서 사용하는 state나 props를 작성하는 것이 원칙이다. ✔️

✔️ 의존성 배열을 잘못 작성하면 불필요한 재실행이나 무한 렌더링이 발생할 수 있다. ✔️

✔️ React 에서는 함수형 컴포넌트와 useEffect를 사용하는 방식이 표준이다. ✔️

 

 

📋 실행 방식 정리 📋

의존성 배열	실행 시점
생략	모든 렌더링마다 실행
[]	최초 마운트 시 한 번 실행
[value]	value가 변경될 때마다 실행
return () => {}	다음 Effect 실행 전 또는 언마운트 시 실행