useEffect

좋아요! useEffect는 React 컴포넌트가 렌더링된 이후 어떤 “부수 효과”를 실행할 때 사용하는 Hook이에요.
쉽게 말해, useEffect는 다음과 같은 상황에서 사용됩니다:

• API 요청 (데이터 불러오기)
• 이벤트 리스너 등록/제거
• 타이머 설정
• 특정 값이 변경될 때 실행

---

✅ 기본 예제: 컴포넌트가 처음 렌더링될 때만 실행

import React, { useEffect } from 'react';

function Hello() {
  useEffect(() => {
    console.log('컴포넌트가 화면에 나타났습니다.');

    return () => {
      console.log('컴포넌트가 화면에서 사라졌습니다.');
    };
  }, []); // 👈 의존성 배열이 비어 있음: 처음 1번만 실행됨

  return <h1>Hello, World!</h1>;
}

 

📌 설명

• useEffect(() => {}, []): 컴포넌트가 처음 마운트될 때만 실행
• return () => {} 부분은 언마운트 시 실행 (정리 용도)

---

✅ 상태 값이 바뀔 때마다 실행되는 예제

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

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

  useEffect(() => {
    console.log(`count가 ${count}로 변경됨`);
  }, [count]); // 👈 count가 변경될 때마다 실행됨

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

---

✅ API 호출 예제 (마운트 시 데이터 불러오기)

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    // 컴포넌트가 처음 나타났을 때 API 호출
    axios.get('https://jsonplaceholder.typicode.com/users')
      .then(res => setUsers(res.data))
      .catch(err => console.error(err));
  }, []); // 👈 빈 배열 → 처음 1번만 실행

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

✅ 요약

구문동작

useEffect(() => {...}, [])	처음 한 번 실행 (마운트 시)
useEffect(() => {...}, [변수])	특정 값이 바뀔 때마다 실행
return () => {}	정리(clean-up) 함수 (언마운트 시 등)