useEffect, Promise 및 Custom Hooks를 사용하여 React에서 비동기 작업 처리하기

React에서 비동기 호출 처리

비동기 작업 처리는 특히 API, 데이터베이스 또는 외부 서비스로 작업할 때 React 애플리케이션의 일반적인 요구 사항입니다. API에서 데이터를 가져오거나 계산을 수행하는 것과 같은 JavaScript 작업은 종종 비동기식이므로 React는 이를 적절하게 처리할 수 있는 도구와 기술을 제공합니다.

이 가이드에서는 async/await, Promise 및 기타 React 관련 도구를 사용하여 React에서 비동기 호출을 처리하는 다양한 방법을 살펴보겠습니다.

---

1. 비동기 호출에 useEffect 사용

React의 useEffect 후크는 구성 요소가 마운트될 때 데이터를 가져오는 것과 같은 부작용을 수행하는 데 적합합니다. Hook 자체는 Promise를 직접 반환할 수 없으므로 Effect 내부에서 비동기 함수를 사용합니다.

useEffect 내부에서 async/await 사용

useEffect 후크를 사용하여 데이터를 가져오기 위한 비동기 호출을 처리하는 방법은 다음과 같습니다.

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

const API_URL = 'https://jsonplaceholder.typicode.com/posts'; // Example API

const AsyncFetchExample = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // Using async/await inside useEffect
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(API_URL);
        if (!response.ok) {
          throw new Error('Failed to fetch data');
        }
        const data = await response.json();
        setPosts(data);
      } catch (error) {
        setError(error.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData(); // Call the async function
  }, []); // Empty dependency array means this effect runs once when the component mounts

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

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default AsyncFetchExample;

• async/await: 약속 기반 가져오기 프로세스를 처리합니다.
• 오류 처리: 오류를 포착하고 적절한 메시지를 표시합니다.
• 로딩 상태: 로딩을 관리하고 데이터를 가져올 때까지 로딩 표시기를 표시합니다.

왜 async/await를 사용하나요?

• 코드 단순화: .then() 및 .catch() 체인이 필요하지 않습니다.
• 더 깔끔하고 읽기 쉬움: 약속을 더 선형적인 방식으로 처리할 수 있습니다.

---

2. 비동기 작업을 위한 약속 사용

또 다른 일반적인 접근 방식은 Promise를 then() 및 catch()와 함께 직접 사용하는 것입니다. 이 방법은 async/await보다 덜 우아하지만 비동기 작업을 처리하기 위해 JavaScript에서 여전히 널리 사용됩니다.

사용 중인 Promise 사용Effect

다음은 비동기 호출에 Promise와 then()을 사용하는 예입니다.

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

const API_URL = 'https://jsonplaceholder.typicode.com/posts';

const AsyncFetchWithPromise = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(API_URL)
      .then((response) => {
        if (!response.ok) {
          throw new Error('Failed to fetch data');
        }
        return response.json();
      })
      .then((data) => {
        setPosts(data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error.message);
        setLoading(false);
      });
  }, []);

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

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default AsyncFetchWithPromise;

• then(): Promise의 성공적인 해결을 처리합니다.
• catch(): API 호출 중에 발생하는 모든 오류를 포착합니다.
• 오류 처리: 요청이 실패하면 오류 메시지를 표시합니다.

---

3. 복잡한 비동기 논리에 useReducer 사용

더 복잡한 상태 전환이 있거나 비동기 프로세스 중에 여러 작업(로드, 성공, 오류 등)을 처리해야 하는 경우 useReducer는 상태 변경을 관리하는 훌륭한 도구입니다.

비동기 작업에 useReducer 사용

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

const API_URL = 'https://jsonplaceholder.typicode.com/posts'; // Example API

const AsyncFetchExample = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // Using async/await inside useEffect
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(API_URL);
        if (!response.ok) {
          throw new Error('Failed to fetch data');
        }
        const data = await response.json();
        setPosts(data);
      } catch (error) {
        setError(error.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData(); // Call the async function
  }, []); // Empty dependency array means this effect runs once when the component mounts

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

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default AsyncFetchExample;

• useReducer: 복잡한 비동기 논리를 위한 더욱 강력한 상태 관리 도구입니다.
• 다중 작업: 로드, 성공, 오류 등 다양한 상태를 개별적으로 처리합니다.

---

4. 재사용 가능한 비동기 로직을 ​​위한 사용자 정의 후크 사용

어떤 경우에는 여러 구성 요소에서 비동기 논리를 재사용하고 싶을 수도 있습니다. 사용자 정의 후크를 만드는 것은 논리를 캡슐화하고 코드를 더 재사용 가능하게 만드는 훌륭한 방법입니다.

데이터 가져오기를 위한 사용자 정의 후크 생성

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

const API_URL = 'https://jsonplaceholder.typicode.com/posts';

const AsyncFetchWithPromise = () => {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(API_URL)
      .then((response) => {
        if (!response.ok) {
          throw new Error('Failed to fetch data');
        }
        return response.json();
      })
      .then((data) => {
        setPosts(data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error.message);
        setLoading(false);
      });
  }, []);

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

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default AsyncFetchWithPromise;

• 사용자 정의 후크(useFetch): 데이터 가져오기, 오류 처리 및 상태 로드에 대한 논리를 캡슐화합니다.
• 재사용성: 데이터를 가져와야 하는 모든 구성 요소에서 후크를 재사용할 수 있습니다.

---

5. 결론

React에서 비동기 작업을 처리하는 것은 최신 웹 애플리케이션을 구축하는 데 필수적입니다. useEffect, useReducer 및 사용자 정의 후크와 같은 후크를 사용하면 비동기 동작을 쉽게 관리하고 오류를 처리하며 원활한 사용자 경험을 보장할 수 있습니다. 데이터 가져오기, 오류 처리, 복잡한 비동기 논리 수행 등 어떤 작업을 하든 React는 이러한 작업을 효율적으로 관리할 수 있는 강력한 도구를 제공합니다.

---

위 내용은 useEffect, Promise 및 Custom Hooks를 사용하여 React에서 비동기 작업 처리하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!