Promise

xogns93 2024. 11. 11. 09:26

2024. 11. 11. 09:26

React에서 Promise는 비동기 작업을 처리하는 JavaScript 객체로, 주로 API 호출이나 데이터를 가져오는 등의 작업에서 사용됩니다. React 자체는 Promise를 생성하거나 관리하는 기능을 제공하지는 않지만, 비동기 작업을 처리하기 위해 Promise를 자주 사용합니다.

Promise란?

Promise는 비동기 작업의 성공 또는 실패 결과를 나타내는 객체입니다. 주로 데이터가 준비되지 않은 상태에서 작업이 완료될 때까지 기다린 후 결과를 처리하는 데 사용됩니다.

Promise의 상태

Pending (대기 중): 작업이 아직 완료되지 않은 상태.
Fulfilled (성공): 작업이 성공적으로 완료된 상태. 결과를 반환.
Rejected (실패): 작업이 실패한 상태. 에러를 반환.

React에서 Promise의 사용 예시

1. Fetch API 호출

React 컴포넌트에서 외부 API 데이터를 가져올 때 Promise를 사용합니다. 주로 fetch나 axios와 함께 사용됩니다.

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

function App() {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    // 비동기 작업 (Promise 사용)
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then((response) => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json(); // JSON 데이터를 Promise로 반환
      })
      .then((data) => setData(data)) // 데이터 설정
      .catch((error) => setError(error.message)); // 에러 처리
  }, []);

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

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

  return (
    <ul>
      {data.map((item) => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  );
}

export default App;

2. Async/Await과 함께 사용

async/await는 Promise를 더 간단하고 가독성 좋게 사용하는 방식입니다.

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

function App() {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts');
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const data = await response.json();
        setData(data);
      } catch (error) {
        setError(error.message);
      }
    };

    fetchData();
  }, []);

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

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

  return (
    <ul>
      {data.map((item) => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  );
}

export default App;

Promise의 주요 메서드

then():

성공적으로 결과를 처리할 때 실행.

예:

fetch('https://api.example.com/data')
  .then((response) => response.json())
  .then((data) => console.log(data));

catch():

에러가 발생했을 때 실행.

예:

fetch('https://api.example.com/data')
  .then((response) => response.json())
  .catch((error) => console.error('Error:', error));

finally():

성공 또는 실패 여부와 상관없이 항상 실행.

예:

fetch('https://api.example.com/data')
  .then((response) => response.json())
  .catch((error) => console.error('Error:', error))
  .finally(() => console.log('Fetch attempt complete.'));

React와 Promise의 활용

API 요청:
- React에서 데이터를 동적으로 가져오기 위해 Promise를 사용.
- 예: fetch, axios.
비동기 작업:
- 비동기 로직(예: 파일 업로드, 데이터 처리 등)에서 결과를 처리하기 위해 Promise를 사용.
상태 관리:
- API 호출 상태(예: 로딩, 성공, 실패)를 React의 상태(useState)와 함께 관리.

Promise와 React의 관계

React는 Promise를 직접 생성하거나 제공하지는 않지만, React 컴포넌트에서 비동기 작업을 처리할 때 주로 Promise를 사용합니다. 예를 들어:

API 호출: fetch나 axios의 Promise를 사용.
데이터 로딩 상태 관리: useEffect와 Promise를 결합하여 비동기 작업 처리.

주의사항

useEffect에서 비동기 작업 관리:
- useEffect 내부에서 비동기 작업을 실행할 때는 async/await 또는 Promise의 반환값을 제대로 처리해야 메모리 누수를 방지할 수 있습니다.
Error Boundary:
- Promise에서 발생하는 에러는 적절히 처리하지 않으면 React에서 예기치 않은 문제가 발생할 수 있습니다.
상태 관리 도구와 결합:
- Redux-Saga나 React-Query 같은 상태 관리 도구를 사용하면 Promise를 더 쉽게 처리할 수 있습니다.

결론

React에서 Promise는 비동기 작업(API 요청, 데이터 처리 등)을 처리하는 데 필수적입니다. React 자체는 Promise를 제공하지 않지만, Promise와 함께 useEffect 또는 async/await을 사용하여 데이터를 관리하고 사용자에게 로딩 상태를 보여줄 수 있습니다. Promise는 비동기 작업의 성공 및 실패를 처리하고, 효율적인 데이터 관리를 가능하게 합니다.

'React' 카테고리의 다른 글

props (0)	2024.11.11
React Event Handling (0)	2024.11.11
컴포넌트, JSX (0)	2024.11.11
Axios (0)	2024.11.11
React (0)	2024.11.11

Taehun_CodeSteps