[리액트] useEffect

useEffect : 리액트에서 부수 효과(side effect)를 관리하기 위해 사용하는 훅

• 컴포넌트가 렌더링될 때마다 특정 작업을 수행할 수 있게 해줌
• 데이터 fetching, 구독 설정, 타이머 설정, DOM 조작 등 다양한 작업을 처리

1. 기본 사용법

useEffect는 두 개의 인자를 받습니다. 첫 번째 인자는 부수 효과를 수행하는 함수이고, 두 번째 인자는 의존성 배열입니다.

 

import React, { useEffect } from 'react';

function Example() {
  useEffect(() => {
    // 부수 효과: 컴포넌트가 렌더링될 때마다 실행
    console.log('컴포넌트가 렌더링되었습니다.');

    // 클린업 함수 (선택적)
    return () => {
      console.log('컴포넌트가 언마운트되었습니다.');
    };
  });

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

2. 의존성 배열

의존성 배열을 두 번째 인자로 전달하여, 특정 값이 변경될 때만 부수 효과를 실행하도록 할 수 있습니다. 빈 배열 []을 전달하면 컴포넌트가 처음 마운트될 때만 실행됨.

 

useEffect(() => {
  console.log('컴포넌트가 처음 마운트되었습니다.');
}, []); // 처음 마운트될 때만 실행

3. 특정 값에 의존하는 효과

의존성 배열에 특정 변수를 추가하면, 해당 변수가 변경될 때마다 부수 효과가 실행됨.

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

useEffect(() => {
  console.log(`현재 카운트: ${count}`);
}, [count]); // count가 변경될 때마다 실행

4. 클린업 함수

부수 효과에서 리소스를 정리해야 할 경우, 클린업 함수를 반환할 수 있습니다. 이 함수는 컴포넌트가 언마운트될 때 또는 다음 effect가 실행되기 전에 호출됨.

useEffect(() => {
  const timer = setInterval(() => {
    console.log('타이머가 작동중입니다.');
  }, 1000);

  // 클린업 함수
  return () => clearInterval(timer); // 타이머 정리
}, []);

5. 여러 개의 useEffect

하나의 컴포넌트에서 여러 개의 useEffect를 사용할 수 있으며, 각 효과는 독립적으로 작동함.

useEffect(() => {
  console.log('첫 번째 효과');
}, []);

useEffect(() => {
  console.log('두 번째 효과');
}, [someDependency]);

6. 비동기 작업

useEffect 내에서 비동기 작업을 처리할 때는, 비동기 함수를 직접 호출하는 대신 내부에서 정의하여 호출함.

useEffect(() => {
  const fetchData = async () => {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  };

  fetchData();
}, []);