JavaScript 및 React Native의 약속: 생성, 사용 및 일반 시나리오

비동기 작업 처리는 JavaScript에서 필수적이며, 특히 데이터 가져오기, 애니메이션 및 사용자 상호 작용이 원활하게 작동해야 하는 React Native와 같은 환경에서는 더욱 그렇습니다. Promise는 비동기 작업을 관리하는 강력한 방법을 제공하여 코드를 더 읽기 쉽고 유지 관리하기 쉽게 만듭니다. 이 블로그에서는 React Native와 관련된 실제 예제와 함께 JavaScript에서 Promise를 생성하고 사용하는 방법을 다룹니다.

---

약속이란 무엇입니까?

JavaScript의 Promise는 비동기 작업의 최종 완료(또는 실패)를 나타내는 개체입니다. 이를 통해 고전적인 "콜백 지옥"을 피하면서 보다 동기적인 방식으로 비동기 코드를 처리할 수 있습니다. 약속에는 세 가지 상태가 있습니다:

• 보류 중: 이행도 거부도 아닌 초기 상태입니다.
• 완료: 작업이 성공적으로 완료되었습니다.
• 거부됨: 작업이 실패했습니다.

---

약속 만들기

Promise를 생성하려면 두 개의 매개변수가 있는 단일 함수(실행자 함수)를 사용하는 Promise 생성자를 사용합니다.

• 해결: 작업이 성공적으로 완료되면 약속을 이행하기 위해 이 함수를 호출합니다.
• 거절: 오류가 발생할 경우 약속을 거부하려면 이 함수를 호출하세요.

예: 기본 약속 만들기

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = true; // Simulating success/failure
      if (success) {
        resolve({ data: "Sample data fetched" });
      } else {
        reject("Error: Data could not be fetched.");
      }
    }, 2000); // Simulate a 2-second delay
  });
}

이 예에서는:

• setTimeout을 사용하여 데이터 가져오기를 시뮬레이션하는 Promise를 생성합니다.
• 성공 변수가 true이면 일부 데이터를 사용하여 해결()을 호출합니다. 그렇지 않으면 오류 메시지와 함께 거부()를 호출합니다.

---

.then(), .catch() 및 .finally()와 함께 Promise 사용

Promise가 생성되면 다음을 사용하여 결과를 처리할 수 있습니다.

• .then()을 사용하여 성공적인 해결을 처리합니다.
• .catch()는 오류를 처리하고
• .finally()는 결과에 관계없이 약속이 확정된 후 코드를 실행합니다.

예: 약속 처리하기

fetchData()
  .then((result) => console.log("Data:", result.data)) // Handle success
  .catch((error) => console.error("Error:", error))    // Handle failure
  .finally(() => console.log("Fetch attempt completed")); // Finalize

이 예에서는:

• Promise가 해결되면 .then()이 호출되어 데이터를 인쇄합니다.
• .catch()는 약속이 거부될 경우 발생하는 모든 오류를 처리합니다.
• .finally()는 Promise의 해결 또는 거부 여부에 관계없이 실행됩니다.

---

React Native의 Promise에 대한 실제 사용 사례

1. API에서 데이터 가져오기

React Native에서 데이터 가져오기는 Promise를 사용하여 효율적으로 관리할 수 있는 일반적인 비동기 작업입니다.

function fetchData(url) {
  return fetch(url)
    .then(response => {
      if (!response.ok) throw new Error("Network response was not ok");
      return response.json();
    })
    .then(data => console.log("Fetched data:", data))
    .catch(error => console.error("Fetch error:", error));
}

// Usage
fetchData("https://api.example.com/data");

사용 사례: 성공적인 응답과 오류를 모두 처리해야 하는 REST API 또는 기타 네트워크 요청에서 데이터를 가져옵니다.

---

2. 순차적 비동기 작업에 대한 약속 사용

가끔 하나의 비동기 작업이 다른 비동기 작업에 종속되는 경우가 있습니다. Promise를 사용하면 작업을 순차적으로 쉽게 연결할 수 있습니다.

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = true; // Simulating success/failure
      if (success) {
        resolve({ data: "Sample data fetched" });
      } else {
        reject("Error: Data could not be fetched.");
      }
    }, 2000); // Simulate a 2-second delay
  });
}

사용 사례: 사용자를 로그인한 후 사용자의 신원을 기반으로 프로필 데이터를 가져오는 데 유용합니다.

---

3. Promise.all()로 여러 약속 처리하기

병렬로 실행할 수 있는 독립적인 Promise가 여러 개 있는 경우 Promise.all()을 사용하면 모든 Promise가 해결되거나 그중 하나가 거부될 때까지 기다릴 수 있습니다.

fetchData()
  .then((result) => console.log("Data:", result.data)) // Handle success
  .catch((error) => console.error("Error:", error))    // Handle failure
  .finally(() => console.log("Fetch attempt completed")); // Finalize

사용 사례: 별도의 API 엔드포인트에서 게시물과 댓글을 가져오는 등 여러 리소스를 동시에 가져옵니다.

---

4. Promise.race()를 사용한 약속 경주

Promise.race()를 사용하면 해결(해결 또는 거부)되는 첫 번째 Promise가 결과를 결정합니다. 이는 장기 실행 작업에 대한 시간 초과를 설정하려는 경우에 유용합니다.

function fetchData(url) {
  return fetch(url)
    .then(response => {
      if (!response.ok) throw new Error("Network response was not ok");
      return response.json();
    })
    .then(data => console.log("Fetched data:", data))
    .catch(error => console.error("Fetch error:", error));
}

// Usage
fetchData("https://api.example.com/data");

사용 사례: 네트워크 요청에 대한 시간 제한을 설정하여 서버가 느리거나 응답하지 않는 경우 무기한 중단되지 않도록 합니다.

---

5. Promise.allSettled()를 사용하여 혼합된 결과 처리

Promise.allSettled()는 해결 여부에 관계없이 모든 Promise가 해결되기를 기다립니다. 일부가 실패하더라도 모든 Promise의 결과가 필요할 때 유용합니다.

function authenticateUser() {
  return new Promise((resolve) => {
    setTimeout(() => resolve({ userId: 1, name: "John Doe" }), 1000);
  });
}

function fetchUserProfile(user) {
  return new Promise((resolve) => {
    setTimeout(() => resolve({ ...user, profile: "Profile data" }), 1000);
  });
}

// Chain promises
authenticateUser()
  .then(user => fetchUserProfile(user))
  .then(profile => console.log("User Profile:", profile))
  .catch(error => console.error("Error:", error));

사용 사례: 선택적 데이터 소스를 가져오거나 여러 API를 호출하는 등 일부 요청이 실패할 수 있는 여러 요청을 실행할 때 유용합니다.

---

고급 기술: 콜백을 약속으로 변환

이전 코드베이스나 특정 라이브러리에서는 프라미스 대신 콜백을 사용할 수 있습니다. 이러한 콜백을 Promise로 래핑하여 최신 Promise 기반 함수로 변환할 수 있습니다.

예: 콜백을 Promise로 래핑하기

const fetchPosts = fetch("https://api.example.com/posts").then(res => res.json());
const fetchComments = fetch("https://api.example.com/comments").then(res => res.json());

Promise.all([fetchPosts, fetchComments])
  .then(([posts, comments]) => {
    console.log("Posts:", posts);
    console.log("Comments:", comments);
  })
  .catch(error => console.error("Error fetching data:", error));

사용 사례: 이 기술을 사용하면 약속 친화적인 방식으로 레거시 콜백 기반 코드를 사용하여 최신 async/await 구문과 호환되도록 할 수 있습니다.

---

요약

Promise는 JavaScript 및 React Native에서 비동기 작업을 관리하기 위한 강력한 도구입니다. 다양한 시나리오에서 Promise를 생성, 사용 및 처리하는 방법을 이해하면 더 깔끔하고 유지 관리하기 쉬운 코드를 작성할 수 있습니다. 일반적인 사용 사례를 간단히 요약하면 다음과 같습니다.

• API 요청: 오류 처리를 통해 서버에서 데이터를 가져옵니다.
• 연쇄 작업: 종속 작업을 순차적으로 실행합니다.
• 병렬 작업: Promise.all()을 사용하여 여러 Promise를 동시에 실행합니다.
• 타임아웃 및 레이싱: Promise.race()를 사용하여 요청 기간을 제한합니다.
• 혼합된 결과: 부분적으로 실패할 수 있는 작업에 Promise.allSettled()를 사용합니다.
• 콜백 변환: 최신 구문과의 호환성을 위해 콜백 기반 함수를 Promise로 래핑합니다.

Promise를 효과적으로 활용하면 JavaScript 및 React Native에서 비동기 프로그래밍을 더욱 깔끔하고 예측 가능하며 강력하게 만들 수 있습니다.

위 내용은 JavaScript 및 React Native의 약속: 생성, 사용 및 일반 시나리오의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!