React의 Promise

React에서 Promise는 JavaScript의 비동기 작업을 관리하는 데 중요한 역할을 합니다. 특히 API 호출, 데이터 요청, 타이머와 같은 비동기 작업을 다룰 때 Promise를 사용하여 작업이 완료되었을 때 후속 처리를 정의할 수 있습니다.

 

Promise의 기본 개념

 

Promise는 비동기 작업이 완료되거나 실패할 때 특정한 동작을 수행하도록 하는 객체입니다. 세 가지 상태를 가질 수 있습니다:

1. Pending (대기 중): 비동기 작업이 시작되었지만 완료되지 않은 상태입니다.

2. Fulfilled (이행됨): 비동기 작업이 성공적으로 완료된 상태입니다.

3. Rejected (거부됨): 비동기 작업이 실패한 상태입니다.

 

Promise는 생성 시, 성공하면 resolve() 함수를, 실패하면 reject() 함수를 호출하여 상태를 변경합니다. 상태가 Fulfilled 또는 Rejected로 바뀌면 then() 또는 catch() 메서드를 통해 결과에 맞는 처리를 이어서 수행할 수 있습니다.

 

Promise 사용 예시

 

React에서 흔히 사용되는 Promise 예시는 API 호출입니다. 예를 들어, fetch를 이용하여 서버에서 데이터를 가져오는 작업을 다음과 같이 작성할 수 있습니다:

fetch('https://api.example.com/data')
  .then(response => response.json())  // 요청이 성공하면 JSON 데이터로 변환
  .then(data => {
    console.log(data);  // 데이터를 성공적으로 받아왔을 때 실행
  })
  .catch(error => {
    console.error('Error:', error);  // 오류가 발생했을 때 실행
  });

 

React에서 Promise 활용

 

React에서는 Promise를 자주 활용하여 비동기 데이터를 로딩합니다. Promise는 주로 컴포넌트가 렌더링될 때 비동기 작업을 수행하고, 작업이 완료되면 상태를 업데이트하여 UI에 반영하는 패턴으로 사용됩니다.

 

예를 들어, useEffect와 상태를 함께 사용하여 API에서 데이터를 가져올 수 있습니다:

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

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

  useEffect(() => {
    // 비동기 작업을 위한 함수 정의
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const result = await response.json();
        setData(result);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

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

  return (
    <div>
      <h1>Data from API</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default DataComponent;

 

Promise와 async/await

 

Promise는 async/await 구문을 사용하여 더 직관적으로 작성할 수 있습니다. async 함수 내에서 await 키워드를 사용하면, Promise의 결과가 준비될 때까지 기다렸다가 그 결과를 할당합니다. async/await 구문은 try/catch 구문과 함께 사용하여 에러 핸들링을 간편하게 할 수 있어 코드 가독성을 높입니다.

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

 

Promise.all과 Promise.race

 

Promise는 여러 개의 비동기 작업을 병렬로 처리할 때 Promise.all과 Promise.race를 사용할 수 있습니다.

• Promise.all: 모든 Promise가 완료될 때까지 기다립니다. 모든 작업이 성공해야 then이 실행되고, 하나라도 실패하면 catch로 넘어갑니다.

Promise.all([fetchData1(), fetchData2()])
  .then(([data1, data2]) => {
    console.log('Data 1:', data1);
    console.log('Data 2:', data2);
  })
  .catch(error => {
    console.error('One of the requests failed:', error);
  });

 

• Promise.race: 여러 Promise 중 하나라도 완료되면 해당 Promise의 결과를 반환합니다.

Promise.race([fetchData1(), fetchData2()])
  .then(data => {
    console.log('First completed data:', data);
  })
  .catch(error => {
    console.error('One of the requests failed:', error);
  });

 

React에서 Promise를 효과적으로 관리하는 라이브러리

 

React에서 비동기 데이터 관리를 더 쉽게 할 수 있는 라이브러리로는 axios(HTTP 요청 라이브러리), react-query(서버 상태 관리), redux-thunk, redux-saga(Redux 비동기 작업 관리) 등이 있습니다. 이들은 Promise를 효율적으로 관리하며 상태 업데이트와 비동기 작업을 더욱 간단하게 해줍니다.

 

요약

 

• Promise는 비동기 작업을 다루는 객체로, Pending, Fulfilled, Rejected 세 가지 상태를 가진다.

• then, catch 메서드를 사용해 비동기 작업 성공 및 실패 시 로직을 정의한다.

• async/await 구문을 통해 Promise를 더 간단히 사용할 수 있다.

• Promise.all과 Promise.race로 여러 비동기 작업을 병렬 처리할 수 있다.

• React에서는 API 호출 시 Promise를 활용하며, useEffect와 함께 비동기 데이터를 상태에 반영할 수 있다.

 

이러한 개념을 활용하여 React에서 비동기 데이터를 효율적으로 처리하고, 사용자가 원하는 시점에 데이터를 요청하고 받아와서 UI에 반영할 수 있습니다.