Promise

2024. 11. 4. 15:25ㆍReact

Promise 기반이란 비동기 작업의 완료 또는 실패 상태를 나타내기 위해 Promise 객체를 사용하는 방식을 의미합니다. 비동기 작업은 서버에 데이터를 요청하는 것처럼 시간이 걸리는 작업을 수행할 때 자주 사용되며, 이러한 작업의 성공 또는 실패를 처리하는 구조로 Promise가 사용됩니다.

Promise란?

Promise는 자바스크립트에서 제공하는 객체로, 비동기 작업이 끝난 후의 결과를 다루기 위한 패턴입니다. 약속된 값을 나타내며, 작업이 완료되거나 실패했을 때 해당 결과를 받을 수 있도록 해줍니다.

Promise의 상태

Promise는 다음과 같은 세 가지 상태를 가집니다:

  1. Pending (대기): 비동기 작업이 아직 완료되지 않은 상태입니다.
  2. Fulfilled (이행): 비동기 작업이 성공적으로 완료된 상태입니다.
  3. Rejected (거부): 비동기 작업이 실패한 상태입니다.

이러한 상태를 통해 비동기 작업의 진행 상황을 추적할 수 있으며, then, catch, finally와 같은 메서드를 사용하여 완료 또는 실패 시 동작을 정의할 수 있습니다.

Promise와 함께 제공되는 resolve와 reject

resolve와 reject는 Promise 객체에서 비동기 작업의 성공과 실패를 나타내기 위해 사용되는 콜백 함수입니다. Promise는 자바스크립트에서 비동기 작업을 관리하기 위해 사용하는 객체로, 작업의 결과를 성공(resolved) 또는 실패(rejected) 상태로 반환할 수 있습니다.

Promise 객체는 두 가지 상태를 가집니다:

  • resolved (성공): 비동기 작업이 성공적으로 완료된 상태
  • rejected (실패): 비동기 작업이 실패한 상태

Promise 생성자 함수는 두 개의 함수 아규먼트를 전달받는데, 이 함수 아규먼트들이 resolve와 reject입니다. 이들은 Promise가 생성될 때 자바스크립트 엔진이 자동으로 제공하므로, 개발자가 직접 정의할 필요는 없습니다.

resolve와 reject의 역할

  1. resolve(value):
    • 비동기 작업이 성공적으로 완료되었을 때 호출합니다.
    • resolve가 호출되면 Promise 상태는 fulfilled(성공)로 변경되며, then 메서드로 연결된 콜백 함수가 실행됩니다.
    • resolve에 전달된 value는 then 메서드의 콜백 함수로 전달됩니다.
    const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const data = { id: 1, name: "Alice" };
    resolve(data); // 성공적으로 데이터를 반환
  }, 1000);
});

promise.then((data) => {
  console.log("Data received:", data); // { id: 1, name: "Alice" }
});
  2. reject(error):
    • 비동기 작업이 실패하거나 오류가 발생했을 때 호출합니다.
    • reject가 호출되면 Promise 상태는 rejected(실패)로 변경되며, catch 메서드로 연결된 콜백 함수가 실행됩니다.
    • reject에 전달된 error는 catch 메서드의 콜백 함수로 전달됩니다.
    const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const error = new Error("Something went wrong");
    reject(error); // 작업 실패 시 에러를 반환
  }, 1000);
});

promise
  .then((data) => {
    console.log("Data received:", data);
  })
  .catch((error) => {
    console.error("Error:", error.message); // Error: Something went wrong
  });

resolve와 reject의 작동 방식

  • Promise 객체가 생성되면 자바스크립트 엔진이 resolve와 reject를 자동으로 생성하여 제공합니다.
  • 개발자는 비동기 작업이 성공했을 때 resolve(value)를 호출하고, 실패했을 때 reject(error)를 호출하여 작업 결과를 전달합니다.
  • resolve는 성공적인 결과를 then으로 연결된 코드로 전달하고, reject는 오류를 catch로 연결된 코드로 전달합니다.

resolve와 reject는 Promise의 상태를 성공과 실패로 나누어 처리하는 핵심 함수로, 비동기 작업의 결과를 관리하는 데 필수적인 역할을 합니다.

Promise 사용 예제

서버에서 데이터를 요청하고, 데이터가 응답되면 처리하는 예제를 통해 Promise가 어떻게 사용되는지 살펴보겠습니다.

// 비동기 함수 fetchData는 데이터를 반환하는 Promise를 리턴합니다.
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { id: 1, name: "John Doe" };
      resolve(data); // 성공적으로 데이터를 받으면 resolve 호출
    }, 2000);
  });
}

// Promise를 사용하여 데이터 요청 결과를 처리합니다.
fetchData()
  .then((data) => {
    console.log("Data received:", data); // 성공 시 데이터를 출력
  })
  .catch((error) => {
    console.error("Error:", error); // 실패 시 에러 출력
  })
  .finally(() => {
    console.log("Request completed"); // 성공/실패 여부와 상관없이 실행
  });

위 코드에서 fetchData() 함수는 Promise를 반환하며, 2초 후 데이터를 resolve하여 반환합니다. 이를 호출한 쪽에서는 then으로 성공 시 결과를 받고, catch로 오류를 처리할 수 있습니다.

Promise 기반의 장점

  • 가독성 향상: 콜백 함수의 중첩(Callback Hell)을 방지하고 코드를 더 읽기 쉽게 만들어 줍니다.
  • 에러 처리: catch 메서드를 통해 모든 오류를 일괄적으로 처리할 수 있어 오류 처리가 간편해집니다.
  • Chaining: 여러 비동기 작업을 순차적으로 실행할 때 Promise를 통해 각 작업의 결과를 다음 작업에 전달할 수 있습니다.

Promise와 async/await

ES2017에서는 async와 await 키워드가 도입되며, Promise 기반 코드를 더 직관적이고 동기적인 방식으로 작성할 수 있게 되었습니다.

async function fetchData() {
  try {
    const response = await axios.get('https://api.example.com/data');
    console.log(response.data); // 성공적으로 받은 데이터 출력
  } catch (error) {
    console.error("Error:", error); // 오류 발생 시 출력
  }
}
fetchData();

await를 사용하면 비동기 코드를 마치 동기 코드처럼 작성할 수 있어 가독성을 더 높일 수 있습니다.

Promise 기반의 비동기 처리는 서버 통신, 파일 읽기, 타이머 등 다양한 비동기 작업에서 효율적인 처리를 가능하게 해줍니다.

ES2017

ES2017, 또는 ECMAScript 2017(ES8)은 자바스크립트 언어의 8번째 버전으로, 2017년에 정식 발표된 ECMAScript 사양을 의미합니다. 이 버전에서는 특히 비동기 작업을 더 쉽게 관리할 수 있는 기능이 추가되었으며, 코드 작성 시 효율성을 높이는 여러 기능이 포함되었습니다.

주요 기능

  1. async/await:
    • 비동기 작업을 처리할 때 Promise 체이닝보다 가독성을 높여주는 문법입니다.
    • async 함수 안에서 await 키워드를 사용해 비동기 작업을 동기 코드처럼 작성할 수 있습니다.
    • await는 Promise가 완료될 때까지 기다린 후 다음 코드를 실행합니다.
    async function fetchData() {
  try {
    const data = await fetch("https://api.example.com/data");
    const result = await data.json();
    console.log(result);
  } catch (error) {
    console.error("Error:", error);
  }
}

fetchData();
  2. Object.values() 및 Object.entries():
    • 객체의 값을 쉽게 가져올 수 있는 Object.values() 메서드와, 객체의 키-값 쌍을 배열로 반환하는 Object.entries() 메서드가 추가되었습니다.
    const user = { id: 1, name: "Alice", age: 25 };

console.log(Object.values(user)); // ["Alice", 25]
console.log(Object.entries(user)); // [["id", 1], ["name", "Alice"], ["age", 25]]
  3. String padding (padStart, padEnd):
    • 문자열의 앞이나 뒤에 특정 문자로 패딩을 추가할 수 있는 padStart()와 padEnd() 메서드가 추가되었습니다. 주로 문자열의 형식을 맞출 때 유용합니다.
    const str = "5";

console.log(str.padStart(3, "0")); // "005"
console.log(str.padEnd(3, "0"));   // "500"
  4. Object.getOwnPropertyDescriptors():
    • 객체의 모든 속성의 설명자(descriptor)를 반환하는 메서드입니다. 이 메서드는 객체 속성의 구성 가능성, 열거 가능성, 쓰기 가능성 등 메타데이터를 확인하거나 설정하는 데 유용합니다.
    const user = { name: "Alice" };

console.log(Object.getOwnPropertyDescriptors(user));
// {
//   name: {
//     value: "Alice",
//     writable: true,
//     enumerable: true,
//     configurable: true
//   }
// }
  5. Trailing commas in function parameter lists and calls:
    • 함수의 파라미터 목록이나 호출 시 마지막에 오는 파라미터 뒤에 쉼표(,)를 허용합니다. 이는 코드 수정이나 버전 관리를 쉽게 만들어 줍니다.
    function example(param1, param2,) {
  console.log(param1, param2);
}

example("Hello", "World",);

ES2017의 도입 효과

ES2017의 기능들은 코드의 가독성과 유지보수성을 향상시키며, 특히 async/await의 도입으로 비동기 처리가 더욱 직관적이고 간편해졌습니다. 이는 자바스크립트 개발자들에게 큰 장점으로 작용하여, 코드 작성과 관리가 더욱 편리해졌습니다.

'React' 카테고리의 다른 글

컴포넌트, JSX  (0) 2024.11.04
Axios  (0) 2024.11.04
react project 실행 관련  (0) 2024.11.04
Context API  (0) 2024.10.24
Hook  (0) 2024.10.24

관련글

티스토리툴바