주의: 본 포스트는 React와 JSX에 대한 이해가 기반으로 작성되었습니다.

JSX 프라그마(JSX pragma)는 React에서 JSX 문법을 사용할 때 필요한 설정입니다. JSX를 사용하면 HTML과 JavaScript를 함께 작성할 수 있어, 컴포넌트를 보다 간편하게 작성할 수 있습니다. 이번 포스트에서는 JSX 프라그마를 설정하여 API 호출과 데이터 처리를 어떻게 할 수 있는지 알아보겠습니다.

1. JSX 프라그마 설정

JSX 프라그마를 설정하여 JSX 문법을 사용할 수 있습니다. 일반적으로는 React 객체를 impot한 후, JSX 프라그마로 설정합니다.

import React from 'react';

/** @jsx jsx */
import { jsx } from '@emotion/react';

위의 코드는 React를 import하고, JS 파일 상단에 JSX 프라그마로 ‘@emotion/react’ 패키지의 jsx 함수를 설정하는 예시입니다.

2. API 호출

API 호출은 fetch나 axios와 같은 HTTP 클라이언트를 사용하여 이루어집니다. 예를 들어, 다음과 같이 API를 호출하는 함수를 작성할 수 있습니다.

import { useEffect, useState } from 'react';

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

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        
        if (!response.ok) {
          throw new Error('API 호출에 실패했습니다.')
        }

        const jsonData = await response.json();
        setData(jsonData);
      } catch (error) {
        console.error(error);
      }
    };

    fetchData();
  }, []);

  return data;
}

위의 코드는 fetchData 함수를 만들어 API를 호출하고, 데이터를 상태로 관리하는 예시입니다. useEffect 훅을 사용하여 컴포넌트가 렌더링될 때 API를 호출하게 되고, 데이터는 useState 훅을 사용하여 관리됩니다.

3. 데이터 처리

API에서 받아온 데이터를 JSX 컴포넌트에서 사용하기 위해서는 데이터를 적절히 처리해야 합니다. 데이터 처리는 JavaScript의 기본 문법을 사용하여 할 수 있습니다.

import React from 'react';

function DataComponent({ data }) {
  if (!data) {
    return <div>Loading...</div>;
  }

  const processedData = data.map(item => ({
    id: item.id,
    name: item.name,
    // 데이터 처리 로직 추가
  }));

  return (
    <div>
      {processedData.map(item => (
        <div key={item.id}>
          <h3>{item.name}</h3>
          {/* 데이터 출력 */}
        </div>
      ))}
    </div>
  );
}

위의 코드는 DataComponent 컴포넌트에서 데이터를 처리하는 예시입니다. 데이터가 없을 경우 ‘Loading…‘을 출력하고, 데이터가 있을 경우에는 map 함수를 사용하여 데이터를 가공하고 JSX로 출력합니다.

마무리

이번 포스트에서는 JSX 프라그마와 함께 API 호출과 데이터 처리를 하는 방법에 대해 알아보았습니다. JSX를 사용해 React 애플리케이션을 개발할 때, API 호출과 데이터 처리는 핵심적인 부분이므로 활용에 주의해야 합니다. 좀 더 복잡한 상황에서는 상태 관리 라이브러리인 Redux나 MobX와 함께 활용할 수 있습니다.

#React #JSX #API호출 #데이터처리