GraphQL 강좌 - ReactJS 강좌: 제1과
ReactJS 및 GraphQL 소개
REST는 URL을 통해 요청이 이루어지는 API 설계 구조입니다. REST API의 핵심 사상은 특정 URL에 연결될 때 자원이라는 데이터를 얻어야 한다는 것입니다.RESTAPI에 연결된 URL을 요청이라고 하며 응답입니다.
GraphQL은 API의 쿼리 언어입니다.API를 여러 번 호출할 필요 없이 특정 데이터를 요청할 수 있습니다. 요청은 조회를 통해 이루어집니다.이런 상황에서 개발자는 데이터베이스에서 하나의 값만 얻을 수 있고 모든 내용을 얻을 필요가 없다.GraphQL은 끝이 아닌 유형 및 필드로 구성됩니다.
지난 몇 년 동안 REST는 API 구조의 표준이었지만 유연성이 부족하여 빠르게 변화하는 수요에 적응하지 못했다.개발자는 더 큰 유연성과 효율을 얻기 위해 특정 유형의 응용 프로그램에서 GraphQL을 디자인 API의 새로운 표준으로 사용하기 시작했다.
얼마 전, 나는 당신에게 어떻게 REST Api in ReactJS.에서 데이터를 얻고 표시하는지 보여 주었다
이 문서에서는 GraphQL API에서 React로 데이터를 가져오는 방법을 보여 드리겠습니다.Axios의 js 응용 프로그램을 사용합니다.
만약 당신이 이 강좌를 배우고 싶다면, 우리 ExpressJS course with GraphQL 를 보세요. 이것은 제 친구가 한 것입니다.
여느 때와 마찬가지로 교과서를 좋아하고 읽기를 싫어하는 사람들에게는 본고의 동영상 버전이다.
우리 시작합시다!
1. ReactJS 앱 만들기
새로운 ReactJS 응용 프로그램을 만드는 것부터 시작하겠습니다. 여기서 프로젝트를 구축합니다.이를 위해 터미널을 열고 다음 명령을 사용합니다.
npx create-react-app <app-name>
cd <app-name>
yarn start
2. Axios 설치 및 에이전트 추가
이제 axios 라이브러리를 설치할 때가 되었습니다. GraphQL 요청을 충족시키기 위해 사용할 것입니다.터미널로 돌아가서 다음 코드를 사용하여 설치합니다.
yarn add axios
package.json 파일에 에이전트를 설정해야 합니다.스크립트 아래에 다음 코드 줄을 추가하지만, 백엔드 URL에 대한 프록시를 설정하는 것을 기억하십시오.나로서는 그것http://localhost:4000이다."proxy": "http://localhost:4000",
3. Bulma 및 아이콘 추가
우리 부르마로 갑시다.문서에서 CDN 및 Font Awesome 아이콘에 대한 링크를 찾을 수 있습니다. 이 아이콘을 추가해야 합니다.
다음 파일
public\index.html을 열고 메인 파일의 헤더 부분에 다음 코드를 추가합니다.<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
4. 새 구성 요소 만들기
src 폴더에서 components 폴더를 만듭니다. 거기서 구성 요소를 만듭니다.새로 만든 폴더에서는 transactions 구성 요소에 대한 폴더를 만들고, 이 폴더에서는 transactions.jsx 파일을 만듭니다.이 파일에서 React를 가져와서 구성 요소를 만들기 시작합니다.
import React, { useEffect, useState } from 'react';
function Transactions() {
return (
<div className="transactions section">
<div className="card has-table has-mobile-sort-spaced">
<header className="card-header">
<p className="card-header-title">
Transactions History
</p>
</header>
<div className="card-content">
<div className="table-wrapper has-mobile-cards">
<table className="table is-striped is-hoverable">
<thead>
<tr>
<th>ID</th>
<th>Amount</th>
<th>Category</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>200$</td>
<td>shopping</td>
<td>10/04/2020</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
);
}
export default Transactions;
App.js 파일로 이동하여 이 구성 요소를 표시합니다.import React from 'react';
import Transactions from './components/transactions/transactions';
import './App.css';
function App() {
return (
<div className="App has-background-light">
<div className="container is-fluid">
<div className="columns">
<div className="column">
<Transactions />
</div>
</div>
</div>
</div>
);
}
export default App;
App.css 파일에 사용자 정의 스타일을 추가합니다..App {
height: auto;
min-height: 100vh;
width: 100vw;
overflow: hidden;
}
.transactions .card-content {
padding: 0;
}
.transactions table {
width: 100%;
}
.transactions .table-wrapper {
overflow: auto;
max-height: 90vh;
}
.transactions .card .card-header {
border-bottom: 1px solid rgba(24,28,33,.06);
}
.transactions .card {
border-radius: 6px;
}
5. GrpahQL API 쿼리 작성
transactions.jsx 파일을 열고 우선 axios를 가져와서 상태 업무를 정의하고 조회를 정의합니다.import React, { useEffect, useState } from 'react';
import axios from 'axios';
function Transactions() {
const [transactions, setTransactions] = useState([]);
const query = `{
expenses {
id,
date,
category,
amount,
type,
}
}`;
...
}
useEffect() 갈고리를 사용하여 API 호출을 구축할 것이다.useEffect(() => {
axios({
url: '/graphql',
method: 'post',
data: {
query,
}
}).then((result) => {
setTransactions(result.data.data.expenses);
});
}, []);
6. 지도 데이터
우리가 시계 줄을 찾으면, 우리는 그것을 사용하여 데이터를 표시한 다음, 데이터를 비추어 그것을 표시할 것이다.
<tbody>
{transactions.map((item) => (
<tr key={item.id}>
<td>{item.id}</td>
<td><span className={`${item.type === 'incoming' ? 'tag is-success' : 'tag is-danger'}`}>{item.type === 'incoming' ? '' : '-'} {item.amount} $</span></td>
<td>{item.category}</td>
<td>{item.date}</td>
</tr>
))}
</tbody>
7, 아이콘 설정
특정한 아이콘을 설정하기 위해서, 나는 switch 문장을 사용하여 함수를 만들 것이다. 그 중에서 나는 모든 종류에 특정한 아이콘을 분배한 다음에 표 칸에서 그것을 호출할 것이다.
const getIcon = (category) => {
let icon;
switch(category) {
case 'entertainment':
icon = 'birthday-cake';
break;
case 'food':
icon = 'pizza-slice';
break;
case 'bills':
icon = 'home';
break;
case 'clothes':
icon = 'tshirt';
break;
case 'cosmetics':
icon = 'bath';
break;
case 'health':
icon = 'first-aid';
break;
case 'electronics':
icon = 'tv';
break;
case 'commuting':
icon = 'car-side';
break;
case 'freelance':
icon = 'laptop-code';
break;
case 'salary':
icon = 'wallet';
break;
case 'passive':
icon = 'money-check-alt';
break;
default:
// code block
}
return icon;
}
...
<td><i className={`fas fa-${getIcon(item.category)}`}></i> {item.category}</td>
결론
축하
이 강좌에서 Axios를 사용하여 ReactJS의 GraphQL API에서 데이터를 가져오는 방법을 배웠습니다.이제 API, REST 및 GraphQL을 동시에 사용할 수 있으며 애플리케이션에 적합한 API를 찾을 수 있습니다.
백엔드에서 GraphQL API를 구축하는 방법을 배울 수 있는 ExpressJS 과정을 살펴보십시오.
코드가 누락된 경우 다음을 참조하십시오.
ReactJS Course: Lesson 1 - Code
읽어주셔서 감사합니다.
둘리의 안나.
Reference
이 문제에 관하여(GraphQL 강좌 - ReactJS 강좌: 제1과), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/duomly/how-to-fetch-data-from-graphql-with-reactjs-and-axios-22k7텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
