useEffect

 

🎯 useEffect란 무엇일까?

useEffect는 **"부수 효과(Effect)"**를 처리하기 위한 도구예요.
부수 효과란?
컴포넌트가 렌더링될 때마다 함께 실행되어야 하는 추가 작업이라고 생각하면 돼요.

예를 들어, 이런 작업들이 있어요:

1. 데이터 가져오기 (API 호출)
2. 브라우저에 무언가를 변경하기 (예: 타이틀 변경)
3. 타이머나 구독 설정하기

이런 작업들은 컴포넌트가 화면에 나타나거나 업데이트될 때 자동으로 실행되게 해야겠죠?
바로 그때 useEffect가 필요해요!

 

🏠 집안일 이야기로 이해하기

집에 손님이 오면 집을 청소해야 하잖아요? 🧹

• 집(컴포넌트)이 화면에 나타나거나 바뀔 때
• **"청소하기(부수 효과)"**라는 일을 실행해야 하죠.

useEffect는 이런 "집안일" 같은 추가 작업을 맡아주는 친구예요.

 

🛠️ useEffect 기본 예시

자, 이제 실제 코드로 보여드릴게요!
화면에 컴포넌트가 나타날 때 "Hello World"라는 문구를 브라우저 타이틀에 표시해 보겠습니다.

import React, { useEffect } from "react";

function Welcome() {
  useEffect(() => {
    // 이 안에 부수 효과를 적어요
    document.title = "Hello World!"; // 브라우저 탭 제목을 변경해요
  });

  return <h1>안녕하세요! 👋</h1>;
}

export default Welcome;

 

🔍 코드에서 무슨 일이 일어날까?

1. useEffect(() => { ... })
   • useEffect는 함수 안에 부수 효과(이 경우 타이틀 변경)를 실행해요.
   • 컴포넌트가 화면에 나타나면 자동으로 실행됩니다.
2. document.title = "Hello World!"
   • 브라우저의 탭 제목을 바꿔주는 코드예요.
3. 결과
   • 화면에 <h1>이 표시되고,
   • 브라우저 탭 제목이 "Hello World!"로 바뀝니다.

 

⏰ useEffect에서 실행 시점 제어하기

"부수 효과를 언제 실행할지"도 제어할 수 있어요.
useEffect에는 의존성 배열이라는 게 있거든요.

 

1. 컴포넌트가 나타날 때만 실행

useEffect(() => {
  console.log("컴포넌트가 화면에 나타났어요!");
}, []); // 의존성 배열이 빈 배열이면, 한 번만 실행돼요

 

• 컴포넌트가 화면에 처음 나타날 때만 실행돼요.
• 이때 [] 안에 아무것도 없으면 한 번만 실행됩니다.

2. 특정 값이 바뀔 때 실행

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

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log(`현재 카운트: ${count}`);
  }, [count]); // count 값이 바뀔 때마다 실행돼요

  return (
    <div>
      <p>카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

export default Counter;

 

 

설명:

• count 값이 바뀔 때마다 useEffect 안의 코드가 실행돼요.
• 버튼을 클릭해서 count를 증가시키면 콘솔에 "현재 카운트"가 출력됩니다.

 

3. 컴포넌트가 사라질 때 정리 작업하기

예를 들어, 타이머나 구독 설정을 해놓았다면, 컴포넌트가 사라질 때 **정리(clean-up)**를 해줘야 해요.

import React, { useEffect } from "react";

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

    // 정리(clean-up) 함수
    return () => {
      clearInterval(timer); // 타이머를 정리해요
      console.log("타이머가 정리되었어요!");
    };
  }, []);

  return <p>⏰ 타이머 실행 중...</p>;
}

export default Timer;

 

설명:

• setInterval로 타이머를 설정하지만,
• 컴포넌트가 사라질 때 clearInterval을 사용해서 타이머를 정리합니다.

 

🚀 정리하자면!

1. useEffect는 부수 효과(추가 작업)를 실행하는 도구예요.
2. 실행 시점을 제어할 수 있어요:
   • 컴포넌트가 처음 나타날 때만 실행: useEffect(..., [])
   • 특정 값이 바뀔 때 실행: useEffect(..., [값])
   • 컴포넌트가 사라질 때 정리 작업: return 안에 정리 코드를 작성해요.