React 기초(4)

모듈이란?

재사용 가능한 코드 조각을 캡슐화하고 다른 파일에서 쉽게 재사용할 수 있게 해준다

📍 export 와 export default의 차이점

export는 import { } 괄호 필요, export default는 import시 괄호 필요 없음.

📌 Promise

비동기 작업의 최종 완료 또는 실패를 나타내는 객체

• Promise는 세 가지 상태 중 하나를 가진다

  • Pending (대기중): 초기 상태로, 아직 성공 또는 실패가 결정되지 않은 상태입니다.
  • Fulfilled (이행됨): 연산이 성공적으로 완료되어 프로미스가 결과 값을 반환한 상태입니다.
  • Rejected (거부됨): 연산이 실패하거나 오류가 발생한 상태입니다.

• Promise 객체를 사용하면,
  비동기 작업의 결과에 따라 콜백 함수를 연결할 수 있으며, .then() 성공, .catch() 실패, 그리고 .finally() 메소드를 이용해 연속적으로 결과처리가능.
  이를 통해 콜백 지옥(Callback Hell)을 피하고 코드의 가독성을 높임.

const myPromise = new Promise(function(resolve, reject) {
  // 비동기 작업을 수행하고
  if (/* 작업 성공 */) {
    resolve('Success!');
  } else {
    reject('Error!');
  }
});

myPromise.then(function(value) {
  // 성공(resolve)한 경우 수행
  console.log(value);  // 'Success!'
}).catch(function(error) {
  // 실패(reject)한 경우 수행
  console.error(error);  // 'Error!'
});

📌 Async / Await 함수

• Async 함수
  async 함수는 async 키워드를 함수 선언 앞에 붙여 정의, 이 함수는 항상 Promise를 반환.

async function fetchData() {
  return 'Data loaded';
}

// 아래 코드와 같아요.
// async function fetchData() {
// 	return Promise.resolve('Data loaded');
// }

fetchData().then(console.log); // 'Data loaded'

• Await 함수
  프로미스의 완료를 기다리는 동안 함수의 실행을 일시적으로 중단하고, 프로미스가 해결되면 자동으로 함수의 실행을 재개.
  따라서, 비동기 코드의 동기적 표현이 가능합니다! 당연히 코드의 가독성이 크게 향상

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

fetchData();



//await를 사용하지 않았을 때의 문제, .then()과 .catch() 메서드를 사용하여 프로미스 체인을 구성해야 하기에 복잡한 체인을 만들어, 코드의 가독성을 저하시키고 유지보수를 어렵게 할 수 있음.

function fetchData() {
  return fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error("Data loading failed", error));
}

fetchData();