[typescript] 비동기 작업의 결과를 화면에 표시하는 방법

14 Dec 2023

typescript

비동기 작업은 웹 애플리케이션에서 매우 일반적이며, 이러한 작업의 결과를 화면에 효과적으로 표시하는 것은 중요합니다. 이 포스트에서는 TypeScript를 사용하여 비동기 작업의 결과를 화면에 표시하는 방법에 대해 설명하겠습니다.

Promise와 async/await

비동기 작업은 주로 Promise나 async/await를 사용하여 처리됩니다. Promise는 비동기 작업의 결과를 나타내는 객체이며, async/await는 코드를 더 읽기 쉽고 직관적으로 만들어줍니다.

async function fetchData(): Promise<string> {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('Data has been fetched');
    }, 1000);
  });
}

async function displayData() {
  const data = await fetchData();
  console.log(data);
}

displayData();

위 예제에서 fetchData 함수는 1초 후에 데이터를 가져와서 결과를 반환하고, 이를 displayData 함수에서 화면에 표시합니다.

화면에 결과 표시하기

화면에 비동기 작업의 결과를 표시하는 방법은 프론트엔드 프레임워크나 라이브러리에 따라 다를 수 있지만, 일반적으로 상태(state)를 사용하여 화면을 업데이트합니다.

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

function DisplayComponent() {
  const [data, setData] = useState('');

  useEffect(() => {
    async function fetchData() {
      const result = await fetchData();
      setData(result);
    }

    fetchData();
  }, []);

  return (
    <div>
      {data && <p>{data}</p>}
    </div>
  );
}

위 예제는 React를 사용한 것으로, useEffect 훅을 사용하여 비동기 작업의 결과를 가져와서 data 상태를 업데이트하고, 이를 화면에 표시합니다.

결론

비동기 작업의 결과를 화면에 표시하는 것은 웹 애플리케이션 개발에서 매우 중요한 부분입니다. Promise와 async/await를 사용하여 비동기 작업을 처리하고, 상태를 업데이트하여 화면에 결과를 표시하는 방법을 잘 이해하고 활용하는 것이 중요합니다.

참고문헌: