JSX pragma를 활용한 비동기 처리(Promises, async/await) 방법

05 Oct 2023

JSXpragma

Async

소개

비동기 처리는 현대 웹 애플리케이션 개발에서 매우 중요한 부분입니다. Promises와 async/await는 JavaScript에서 비동기 코드를 처리하는 데 유용한 도구입니다. JSX Pragma는 React 컴포넌트에서 비동기 처리를 위해 사용될 수 있는 다른 방법입니다. 이번 블로그 포스트에서는 JSX Pragma를 활용하여 Promises와 async/await를 사용하는 방법에 대해 알아보겠습니다.

Promises를 사용한 비동기 처리

Promises는 비동기 작업을 처리하기 위해 사용되는 객체입니다. 비동기 작업이 완료되면(성공 또는 실패) 값을 반환하거나 에러를 던집니다. Promises를 사용하여 비동기 작업을 처리하는 방법은 다음과 같습니다.

import axios from 'axios';

function fetchData() {
  return new Promise((resolve, reject) => {
    axios.get('https://api.example.com/data')
      .then(response => resolve(response.data))
      .catch(error => reject(error));
  });
}

fetchData()
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

async/await를 사용한 비동기 처리

async/await는 Promises보다 간편한 문법을 제공하여 비동기 코드를 더 읽기 쉽고 이해하기 쉽게 만듭니다. async 함수 내에서 await 키워드를 사용하여 비동기 작업의 완료를 기다릴 수 있습니다. 다음은 async/await를 사용하여 비동기 작업을 처리하는 방법입니다.

import axios from 'axios';

async function fetchData() {
  try {
    const response = await axios.get('https://api.example.com/data');
    return response.data;
  } catch (error) {
    throw new Error(error);
  }
}

async function main() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

main();

JSX Pragma를 활용한 비동기 처리

JSX Pragma를 사용하면 JSX 문법을 확장하여 비동기 처리를 쉽게 할 수 있습니다. JSX Pragma를 활용한 비동기 처리 방법은 다음과 같습니다.

/** @jsx jsx */

import { jsx } from '@emotion/core';

async function fetchData() {
  try {
    const response = await axios.get('https://api.example.com/data');
    return response.data;
  } catch (error) {
    throw new Error(error);
  }
}

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchData()
      .then(data => {
        setData(data);
      })
      .catch(error => {
        console.error(error);
      });
  }, []);

  return <div>{data}</div>;
}

위의 코드에서는 JSX Pragma로 @jsx jsx를 사용하여 JSX Pragma를 활성화하였습니다. 그리고 useState와 useEffect 훅을 사용하여 비동기 데이터를 가져와서 화면에 표시하도록 구현하였습니다.

결론

JSX Pragma를 사용하여 Promises와 async/await를 활용한 비동기 처리 방법을 알아보았습니다. 이를 사용하여 React 컴포넌트에서 비동기 작업을 처리할 수 있습니다. Promises와 async/await를 결합한 JSX Pragma를 사용하면, 더욱 간편하고 가독성 좋은 코드를 작성할 수 있습니다.

#비동기처리 #Promises #async/await #JSX Pragma