Axios로 데이터를 가져와 React 그리드를 생성하는 방법

기초튜토리얼 Axios로 데이터를 가져와 React 그리드를 생성하는 방법

추천0

페이지 정보

작성자 MESCIUS

작성일 2024-04-30 17:00 조회 125회 댓글 0건

검색

본문

관련링크

대부분의 개발자가 React 기반 완벽한 데이터 컴포넌트를 찾기 위해 고군분투하고 있습니다.

이러한 개발자들의 니즈를 충족시키고자 MESCIUS는 모든 어려움을 극복하고 최적의 컴포넌트 라이브러리를 개발했습니다.

바로 Wijmo입니다!

모든 기능과 만반의 준비를 갖춘 이 컴포넌트 라이브러리만 있다면 누구나 컴포넌트 세계를 지배할 수 있습니다!

이 포스팅에서는 Wijmo의 가장 인기 있는 컴포넌트 중 하나인 FlexGrid를 활용하여 빌드해 보겠습니다.

인기 있는 개방형 API SWAPI(Star Wars API)에서 가져온 데이터를 표시할 것입니다.

이제 시작해 보겠습니다.

참조 코드를 확인하려면 이곳을 클릭해 주세요!

1단계: React 앱 설정

여기서는 우주 테마의 모험을 시작하기 위해, Create React App 도구를 활용하여 개발 환경을 설정합니다.

터미널을 열고 다음 명령을 실행합니다.

npx create-react-app swapi-wijmo-app
cd swapi-wijmo-app

이렇게 하면 표준화된 구조의 새로운 React 앱이 생성됩니다.

쉽게 구성하고, 또 구축할 수 있습니다.

2단계: Wijmo 및 Axios 설치

다음으로 Wijmo 및 Axios에 필요한 패키지를 설치합니다.

* Wijmo는 다양한 기능을 가진 React 컴포넌트를 제공하며, 데이터를 효율적으로 표시하기 위한 FlexGrid도 포함됩니다. * Axios는 HTTP 요청을 만드는 프로세스를 단순화합니다.

npm install @mescius/wijmo.react.all axios

3단계: WijmoGrid 컴포넌트 만들기

FlexGrid가 포함될, 재사용 가능한 WijmoGrid 컴포넌트를 만들어 보겠습니다.

이 컴포넌트는 데이터를 Prop으로 사용하여 SWAPI 데이터 구조를 기반으로 열을 동적으로 생성합니다.

아래와 같이 WijmoGrid.js 파일을 만듭니다.

import React from 'react';
import { FlexGrid, FlexGridColumn } from '@mescius/wijmo.react.grid';

const WijmoGrid = ({ data }) => {
  return (
<div>
    <FlexGrid itemsSource={data}>
      <FlexGridColumn header="Name" binding="name" />
      <FlexGridColumn header="Height" binding="height" />
      {/* Add more columns as needed */}
    </FlexGrid>
</div>
  );
};

export default WijmoGrid;

4단계: SWAPI에서 데이터 가져오기

App.js에서 컴포넌트가 마운팅될 때 useEffect 훅(Hook)를 사용하여 SWAPI에서 데이터를 가져옵니다.

가져온 데이터는 표시될 WijmoGrid 컴포넌트에 전달됩니다.

import React, { useState, useEffect } from 'react';
import Axios from 'axios';
import WijmoGrid from './WijmoGrid';

const App = () => {
  const [swapiData, setSwapiData] = useState([]);

  useEffect(() => {
    Axios.get('https://swapi.dev/api/people/')
      .then((response) => {
        setSwapiData(response.data.results);
      })
      .catch((error) => {
        console.error('Error fetching SWAPI data:', error);
      });
  }, []);

  return (
    <div>
      <h1>Star Wars Characters</h1>
      <WijmoGrid data={swapiData} />
    </div>
  );
};

export default App;

5단계: 실행 및 탐색

모든 것이 배치된 상태에서 터미널에 npm start 를 입력해 보세요.

앱을 실행하고 모든 스타워즈 등장인물이 최신 스타일 Wijmo 그리드에 표시되는지 확인해 보세요!

모든 요소를 원하는 대로 구체적으로 스타일링하고 커스터마이징할 수 있으며, 내장되어 있는 수십 가지 테마와 함께 Wijmo를 시작할 수 있습니다.

여기서는 Wijmo의 다크 테마를 사용하였습니다.

6단계: 추가 기능

그리드에 훨씬 더 많은 기능이 필요한 경우 Wijmo를 사용하여 어렵지 않게 추가할 수 있습니다!

추가 기능의 예로 페이징을 보여 드리겠습니다.

페이징을 추가하려면 CollectionView를 사용합니다.

Axios 응답을 CollectionView에 할당하고 일부 속성을 설정합니다.

그런 다음, 페이징 기능을 위해 컴포넌트에 CollectionViewNavigator를 사용합니다.

App.js에서 다음 코드를 추가합니다.

import { CollectionView } from '@mescius/wijmo';

const App = () => {
  var cv = new CollectionView([], {});

  useEffect(() => {
    // Fetch data from SWAPI when the component mounts
    Axios.get('https://swapi.dev/api/people/')
      .then((response) => {
        cv.sourceCollection = response.data.results;
        cv.pageSize = 5;
      })
      .catch((error) => {
        console.error('Error fetching SWAPI data: ', error);
      });
  }, []); // Empty dependency array ensures the effect runs only once

  return (
     <h1>Star Wars Characters</h1>
     <WijmoGrid data={cv}></WijmoGrid>
  );
};

그런 다음 WijmoGrid.js에서 FlexGrid 뒤에 다음 코드를 추가합니다.

import { CollectionViewNavigator } from '@mescius/wijmo.react.input';

<div>
     <CollectionViewNavigator
       headerFormat="Page {currentPage:n0} of {pageCount:n0}"
       byPage={true}
       cv={data}
       />
</div>

이제 페이징 기능이 추가되었습니다!