개요

React에서 useEffect Hook은 사이드 이펙트를 수행하기 위해 사용됩니다. 사이드 이펙트란 데이터를 가져오거나, 구독을 설정하거나, DOM을 직접 조작하는 등의 행위를 의미합니다. 이 글에서는 useEffect를 이용해 REST API를 호출하고 데이터를 불러오는 방법에 대해 설명하겠습니다.

useEffect 기본 개념

useEffect는 함수형 컴포넌트 내부에서 사용되며 주로 컴포넌트가 렌더링된 후에 실행됩니다. useEffect는 두 개의 주요 파라미터를 가집니다: 첫 번째는 실행될 함수, 두 번째는 의존성 배열입니다.

기본 사용법

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

const MyComponent = () => {
  useEffect(() => {
    // 수행할 작업
  }, []); // 의존성 배열

  return <div>My Component</div>;
};

여기서 빈 배열 []은 컴포넌트가 처음 마운트될 때만 이펙트가 실행되도록 합니다.

useEffect로 API 호출하기

이제 useEffect를 사용하여 API를 호출하고 데이터를 불러오는 방법을 살펴보겠습니다. 간단한 예제를 통해 설명하겠습니다.

예제: 사용자 데이터 불러오기

1. 먼저, 우리는 JSONPlaceholder와 같은 무료 REST API를 사용하여 데이터를 가져오겠습니다.

2. useState Hook을 사용하여 API에서 불러온 데이터를 저장할 상태를 관리합니다.

3. useEffect Hook을 사용하여 컴포넌트가 마운트될 때 API를 호출합니다.

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

const UsersComponent = () => {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/users');
        const data = await response.json();
        setUsers(data);
        setLoading(false);
      } catch (error) {
        console.error('Error fetching users:', error);
        setLoading(false);
      }
    };

    fetchUsers();
  }, []); // 빈 배열을 의존성 배열로 전달

  if (loading) {
    return <div>Loading...</div>;
  }

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

export default UsersComponent;

코드 설명

1. useState를 사용하여 users와 loading 두 개의 상태를 정의합니다. users는 API로부터 불러온 데이터를 저장하며, loading은 데이터 로딩 상태를 나타냅니다.

2. useEffect 안에서 비동기 함수를 선언하고 호출하여 API에 요청을 보냅니다. fetch API를 사용하여 데이터를 가져오며, 이를 JSON 형식으로 파싱합니다. 파싱된 데이터는 setUsers를 통해 상태에 저장되고, 로딩 상태는 setLoading(false)를 통해 업데이트됩니다.

3. catch 블록을 통해 API 호출 중 발생한 오류를 처리합니다. 오류가 발생하면 콘솔에 오류 메시지를 출력하고 로딩 상태를 업데이트합니다.

4. 컴포넌트가 렌더링될 때 loading 상태가 true면 'Loading...' 메시지를 표시하고, false면 사용자 목록을 렌더링합니다.

결론

이 글에서는 React의 useEffect Hook을 사용하여 REST API를 호출하고 데이터를 불러오는 방법에 대해 다뤘습니다. 간단한 예제를 통해 useEffect와 useState를 활용하는 방법을 몸소 체험해보았습니다. 이를 통해 컴포넌트 생명주기 동안 발생하는 사이드 이펙트를 효율적으로 관리할 수 있습니다.