React useEffect

useEffect 

1. 의존성 배열 (Dependency Array)

useEffect는 두 번째 인자로 의존성 배열을 받을 수 있습니다. 의존성 배열을 통해 특정 값이 변경될 때만 이펙트를 실행할 수 있습니다.

{`useEffect(() => {
  console.log("컴포넌트가 마운트될 때 한 번만 실행됩니다.");
}, []);  // 빈 배열`}
            

의존성 배열이 빈 배열일 때 컴포넌트가 마운트 될 때 한 번만 실행됩니다.

Tip: 의존성 배열에 특정 변수를 넣으면 해당 변수가 변경될 때마다 useEffect가 실행됩니다.

2. cleanup 함수 (정리 작업)

useEffect에서 반환하는 함수는 컴포넌트가 원마운트되거나, 의존성 배열에 포함된 값이 변경되기 전에 실행됩니다. 보통 이벤트 리스너를 제거하거나 타이머를 정리할 때 사용됩니다.

{`useEffect(() => {
  const timer = setInterval(() => {
    console.log("1초마다 실행됩니다.");
  }, 1000);
  
  return () => {
    clearInterval(timer);
    console.log("타이머가 정리되었습니다.");
  };
}, []);`}
            

cleanup 함수는 컴포넌트가 언마운트될 때 또는 의존성 배열이 변경될 때 실행됩니다. 이 예제에서는 타이머를 정리하는 코드입니다.

3. 데이터 Fetching (API 호출)

useEffect를 사용하면 컴포넌트가 렌더링 될 때 API 호출을 처리할 수 있습니다. 비동기 작업을 할 때는 async/await를 사용합니다.

{`useEffect(() => {
  const fetchData = async () => {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    const result = await response.json();
    setData(result);
    setLoading(false);
  };
  
  fetchData();
}, []);`}
            

컴포넌트가 마운트될 때 한 번만 실행되어 API 데이터를 가져옵니다. 성공적으로 데이터를 가져오면 상태를 업데이트합니다.

4. 부수 효과 관리

useEffect는 여러 개의 부수 효과를 관리할 때 유용합니다. 여러 개의 useEffect를 나누어 사용할 수도 있습니다.

{`useEffect(() => {
  console.log("컴포넌트가 렌더링되었습니다.");
}, []);

useEffect(() => {
  console.log("카운트가 변경되었습니다:", count);
}, [count]);`}
            

각각의 부수 효과를 독립적으로 관리할 수 있습니다. 이를 통해 코드가 더 깔끔해지고 유지보수가 쉬워집니다.

실습: API 데이터를 이용한 데이터 출력

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

function FetchData() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts');
        const result = await response.json();
        setData(result);
        setLoading(false);
      } catch (err) {
        setError(err);
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      <h1>API 데이터 목록</h1>
      <ul>
        {data.map(post => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default FetchData;

이 예제에서는 API 데이터를 가져와서 화면에 표시하는 방법을 배웁니다. 에러 처리를 통해 네트워크 오류도 처리합니다.