기초튜토리얼 Axios로 데이터를 가져와 React 그리드를 생성하는 방법
페이지 정보
작성자 MESCIUS 작성일 2024-04-30 17:00 조회 126회 댓글 0건본문
관련링크
최적의 컴포넌트 라이브러리를 개발했습니다.
이 포스팅에서는 Wijmo의 가장 인기 있는 컴포넌트 중 하나인 FlexGrid를 활용하여 빌드해 보겠습니다.
인기 있는 개방형 API (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를 사용하여 어렵지 않게 추가할 수 있습니다!
추가 기능의 예로 페이징을 보여 드리겠습니다.
페이징을 추가하려면 를 사용합니다.
Axios 응답을 CollectionView에 할당하고 일부 속성을 설정합니다.
그런 다음, 페이징 기능을 위해 컴포넌트에 를 사용합니다.
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>
이제 페이징 기능이 추가되었습니다!
📌 참고
API의 제한 사항으로 인해, 반환되는 항목의 수가 제한되어 있지만 이번 예제에서는 작동합니다.
결론
SWAPI 데이터를 사용하여 스타워즈 테마의 React 앱을 만들어 보았습니다.
이 간단한 가이드를 통해 Wijmo의 방대한 가능성을 확인하셨길 바랍니다!
동적인 사용자 인터페이스를 만들 수 있는 React의 기능과 Wijmo의 다양한 데이터 시각화 기능을 결합하여, 개발자는 시각적으로 매력적인 응용 프로그램을 신속하게 만들 수 있습니다.
여러분이 React 앱을 만들 때 Wijmo의 강력한 기능이 개발 작업에 도움이 되기를 바랍니다!
지금 바로 Wijmo를 다운로드하여 직접 테스트해보세요!
댓글목록
등록된 댓글이 없습니다.