[React] Promise를 사용하여 비동기 작업을 처리하는 법

Promise 란?

fetch('https://api.example.com/data')
  .then(response => response.json()) // Promise를 사용하여 응답을 JSON 형식으로 파싱
  .then(data => {
    // 파싱된 데이터를 처리하거나 상태를 업데이트하는 등의 작업 수행
    console.log(data);
  })
  .catch(error => {
    // 오류 처리
    console.error('Error fetching data:', error);
  });

• 성능 향상
비동기 작업을 사용하면 여러 작업을 동시에 처리할 수 있으므로 전체적인 성능을 향상시킬 수 있습니다. 특히 네트워크 요청이나 파일 로딩과 같은 I/O 작업에서 비동기 작업을 사용하면 응답 대기 시간을 줄일 수 있습니다.

• 사용자 경험 개선
비동기 작업을 사용하면 사용자 인터페이스가 더 반응적이고 빠르게 동작할 수 있습니다. 예를 들어, 웹 페이지에서 비동기적으로 데이터를 가져와서 화면에 표시할 때 페이지의 로딩 시간이 감소하고 사용자가 더 빠르게 상호작용할 수 있습니다.

• 자원 관리
비동기 작업을 사용하면 자원을 효율적으로 관리할 수 있습니다. 특히 멀티스레딩을 통해 여러 작업을 동시에 처리하고 자원을 효율적으로 활용할 수 있습니다.
 

동기 작업 예시

function syncTask() {
  console.log("동기 작업 시작");
  console.log("동기 작업 진행 중...");
  console.log("동기 작업 완료");
}

console.log("프로그램 시작");
syncTask();
console.log("프로그램 종료");

프로그램 시작
동기 작업 시작
동기 작업 진행 중...
동기 작업 완료
프로그램 종료

비동기 작업 예시

function asyncTask() {
  console.log("비동기 작업 시작");
  setTimeout(() => {
    console.log("비동기 작업 완료");
  }, 2000); // 2초 후에 작업 완료 메시지 출력
}

console.log("프로그램 시작");
asyncTask();
console.log("프로그램 종료");

프로그램 시작
비동기 작업 시작
프로그램 종료
비동기 작업 완료 // 2초 후에 출력됨

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

function App() {
  // 상태 초기화
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  // useEffect를 사용하여 컴포넌트가 마운트될 때 데이터 가져오기
  useEffect(() => {
    // 비동기 작업 시작
    fetchData()
      .then(response => {
        // 데이터 가져오기 성공 시 상태 업데이트
        setData(response);
        setLoading(false);
      })
      .catch(error => {
        // 데이터 가져오기 실패 시 에러 처리
        console.error('Error fetching data:', error);
        setLoading(false);
      });
  }, []); // 빈 배열을 전달하여 컴포넌트가 마운트될 때 한 번만 실행되도록 함

  // 데이터를 가져오는 비동기 함수
  const fetchData = async () => {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
  };

  return (
    <div>
      <h1>React 비동기 작업 예시</h1>
      {loading ? (
        <p>Loading...</p>
      ) : (
        <div>
          <h2>Data:</h2>
          <pre>{JSON.stringify(data, null, 2)}</pre>
        </div>
      )}
    </div>
  );
}

export default App;

🚢 개발자 이직 준비, 어떻게 시작해야 할지 모르겠나요? 한 단계 더 도약하는 험난한 항해에서 든든한 메이트가 되어드리겠습니다.