[React 기초] useEffect 사용하기

useEffect 사용하기 ⚡

React에서 가장 많이 사용하는 Hook 중 하나가
useEffect 입니다.

React에서 useEffect는
컴포넌트가 렌더링 된 이후 실행되는 함수입니다.

쉽게 말하면

화면이 만들어진 후 실행되는 코드

라고 이해하면 됩니다.

오늘 배울 내용 🎯

✔ useEffect란 무엇인가
✔ 언제 사용하는가
✔ 기본 사용 방법
✔ 의존성 배열
✔ 실제 사용 예제

주요 포인트 Top3

01. useEffect란 무엇인가 🧩

React 컴포넌트는
렌더링 → 화면 표시

이 과정을 거칩니다.

그 이후 실행해야 하는 코드가 있을 수 있습니다.

예를 들어

API 호출
이벤트 등록
데이터 초기화

이런 경우 useEffect를 사용합니다.

👉 즉
렌더링 이후 실행되는 코드를 작성할 때 사용합니다.

02. useEffect 기본 사용 방법 ⚙️

먼저 import 합니다.

import { useEffect } from "react";

기본 구조

useEffect(() => {
  console.log("실행됨");
});

이렇게 작성하면
렌더링될 때마다 실행됩니다.

03. 의존성 배열 (Dependency Array) 📌

useEffect는 두 번째 인자로
의존성 배열을 받습니다.

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

이 배열이 매우 중요합니다.

① 빈 배열 []

useEffect(() => {
  console.log("처음 실행");
}, []);

👉 처음 렌더링 시 1번 실행

가장 많이 사용하는 형태입니다.

② 값 넣기

useEffect(() => {
  console.log("count 변경됨");
}, [count]);

👉 count 값이 변경될 때 실행

③ 배열 없이 사용

useEffect(() => {
  console.log("매번 실행");
});

👉 렌더링될 때마다 실행

04. 실제 예제 🔥

import { useState, useEffect } from "react";
 
function App() {
  const [count, setCount] = useState(0);
 
  useEffect(() => {
    console.log("렌더링 완료");
  }, []);
 
  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>
        증가
      </button>
    </div>
  );
}

이 코드는

✔ 화면 렌더링
✔ useEffect 실행

순서로 동작합니다.

05. 가장 많이 사용하는 useEffect 용도 📌

① API 호출

useEffect(() => {
  fetch("/api/data")
}, []);

② 이벤트 등록

useEffect(() => {
  window.addEventListener("resize", handleResize);
}, []);

③ 초기 데이터 설정

useEffect(() => {
  setCount(10);
}, []);

06. useEffect 실행 흐름 🔄

React 실행 순서

컴포넌트 렌더링
↓
화면 표시
↓
useEffect 실행

이 흐름을 이해하는 것이 중요합니다.

07. useEffect 사용 시 주의사항 ⚠️

useEffect 안에서 state 변경 시
무한 루프가 발생할 수 있습니다.

예

useEffect(() => {
  setCount(10);
});

이렇게 작성하면

렌더링
↓
useEffect 실행
↓
state 변경
↓
렌더링
↓
useEffect 실행

👉 무한 반복

그래서 보통

useEffect(() => {
  setCount(10);
}, []);

이렇게 작성합니다.

GOYO.’s Tip 💡

useEffect에서 가장 중요한 것은
의존성 배열 입니다.

[] → 처음 1번 실행
[count] → 값 변경 시 실행
없음 → 매번 실행

이 세 가지는 반드시 기억해야 합니다.

그리고 useEffect는
API 호출에서 가장 많이 사용됩니다.

마무리 🎯

이번 글에서는
React의 핵심 Hook인 useEffect를 알아봤습니다.

✔ useEffect 개념
✔ 기본 사용 방법
✔ 의존성 배열
✔ 실제 사용 예제

다음 글에서는
API 데이터 가져오기를 알아보겠습니다.