GraphQL과 React Native 시작하기
본문
2012년 페이스 북 엔지니어 Nick Schrock은 작은 Facebook 프로토 타입 작업을 시작하여 현재 Facebook 뉴스 피드를 지원하는 오래된 지원되지 않는 파트너 API에서 쉽게 이동할 수 있습니다. 당시에는 이것을 "슈퍼 그래프"라고 했습니다. 오늘날에도 SuperGraph는 최근 오픈 소스 쿼리 언어인 GraphQL을 형성하는 데 도움이 되었습니다.
https://www.sitepoint.com/graphql-react-native-getting-started/
Facebook은 GraphQL을 "API용 쿼리 언어 및 기존 데이터로 쿼리를 수행하기 위한 런타임"으로 설명합니다. 간단히 말해 GraphQL은 출시 이후 꾸준히 인기를 얻고 있는 REST의 대안입니다. REST를 사용하면 개발자는 일반적으로 일련의 엔드 포인트 요청에서 데이터를 수집하는 반면 GraphQL을 사용하면 개발자는 정확한 데이터 요구 사항을 설명하는 단일 쿼리를 서버에 보낼 수 있습니다.
처음부터 React Native를 배우고 싶습니까? 이 기사는 프리미엄 라이브러리에서 발췌 한 것입니다. SitePoint Premium을 사용하여 기본 사항, 프로젝트, 팁 및 도구 등을 다루는 React Native 서적 전체를 얻으십시오. 월 $ 9에 지금 가입하십시오.
전제 조건
이 학습서에는 React Native에 대한 기본 지식과 Expo 환경에 대한 지식이 필요합니다. 또한 모바일 장치에 Expo 클라이언트가 설치되어 있거나 컴퓨터에 호환되는 시뮬레이터가 설치되어 있어야 합니다. 이를 수행하는 방법에 대한 지시 사항은 여기에서 찾을 수 있습니다.
프로젝트 개요
이 튜토리얼에서는 간단한 커피 빈 비교 앱을 만들어 React Native 설정에서 GraphQL의 성능을 최대한 활용합니다. GraphQL이 제공하는 모든 훌륭한 기능에 초점을 맞출 수 있도록 Expo를 사용하여 응용 프로그램의 기본 템플릿을 구성했습니다.
시작하려면 이 저장소를 복제하고 "시작하기"분기로 이동하십시오. 여기에는 GraphQL 데이터 추가를 시작하기 위한 모든 기본보기와 이 단계의 모든 초기 종속성이 포함됩니다.
{
"expo": "^32.0.0",
"react": "16.5.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz",
"react-navigation": "^3.6.1"
}이 분기를 복제하려면 터미널을 열고 다음 명령을 실행해야 합니다.
git clone https://github.com/jamiemaison/graphql-coffee-comparison.git그런 다음 시작 지점으로 이동하려면 cd graphql-coffee-comparison을 사용하여 새로 복제 된 저장소로 이동하고 git checkout getting-started를 실행하십시오.
다음 단계는 의존성을 설치하는 것입니다. 이렇게 하려면 Node v11.10.1을 사용하고 프로젝트의 루트 디렉토리에서 npm install을 실행하십시오. 위에 나열된 모든 종속성이 node_modules 폴더에 추가됩니다.
React Native 앱에 GraphQL을 추가하려면 몇 가지 간단한 GraphQL 기능을 수행하는 데 도움이 되는 몇 가지 종속성을 추가로 설치해야 합니다. 최신 JavaScript 개발에서와 마찬가지로 데이터 요청을 완료하기 위해 이러한 모든 종속성이 필요하지는 않지만 개발자에게 깨끗하고 읽기 쉬운 코드를 구성 할 수 있는 더 나은 기회를 제공하는 데 도움이 됩니다. npm install --save apollo-boost react-apollo graphql-tag graphql을 실행하여 필요한 종속성을 설치할 수 있습니다.
이러한 종속성의 개요는 다음과 같습니다.
- apollo-boost : React / React Native에서 GraphQL을 시작하는 제로 구성 방법
- react-apollo: 이것은 GraphQL과 Apollo 클라이언트 사이의 통합을 제공합니다
- graphql-tag: GraphQL 쿼리를 구문 분석하는 템플릿 리터럴 태그
- graphql : GraphQL에 대한 JavaScript 참조 구현
필요한 모든 종속성 설치가 완료되면 npm start를 실행하십시오. 이제 친숙한 Expo 창이 표시되며, 시뮬레이터 또는 장치를 통해 앱을 시작하면 다음과 유사한 화면이 표시됩니다.
기본적으로 이 애플리케이션에는 반응 탐색으로 관리되는 두 개의 화면 (Home.js 및 CoffeePage.js)이 있습니다. 홈 화면에는 데이터 필드에 제공된 모든 커피 원두를 렌더링 하는 간단한 FlatList가 있습니다. 클릭하면 사용자가 해당 항목의 CoffeePage로 이동하여 제품에 대한 자세한 정보를 표시합니다. 이 보기를 GraphQL의 흥미로운 데이터로 채우는 것이 우리의 임무입니다.
아폴로 서버 놀이터
성공적인 GraphQL 트랜잭션에는 데이터를 보유하는 서버와 요청을 하는 프런트 엔드 쿼리라는 두 가지 주요 요소가 있습니다. 이 튜토리얼의 목적 상 서버 측 코드의 놀라운 세계에 대해 알아보기 시작하지 않으므로 준비 할 수 있도록 서버를 만들었습니다. 즐겨 찾는 브라우저에서 yq42lj36m9.sse.codesandbox.io로 이동하여 개발 과정 내내 실행 시키면 됩니다. 관심 있는 사람들을 위해 서버 자체는 apollo-server를 사용하여 실행 중이며 필요한 데이터를 보유하고 적절한 쿼리를 받으면 서비스를 제공하기에 충분한 코드 만 포함합니다. 자세한 내용을 보려면 apollographql.com으로 이동하여 apollo-server에 대한 자세한 내용을 읽으십시오.
GraphQL 쿼리 기본 사항
우리는 우리가 우리의 커피 콩 비교 응용 프로그램에 필요한 데이터를 요청하는 것 실제 코드를 작성에 들어가기 전에, 우리는 쿼리가 작동 얼마나 GraphQL 이해해야 합니다. 쿼리 작동 방식을 이미 알고 있거나 코딩을 시작하려는 경우 다음 섹션으로 건너 뛸 수 있습니다.
참고 :이 검색어는 Google 코드 샌드 박스 서버에서 작동하지 않지만 검색어를 테스트하려면 codesandbox.io에서 자유롭게 만들 수 있습니다.
요청하는 데이터의 형태를 알면 가장 간단한 수준에서 쿼리에 단순한 구조를 사용할 수 있습니다.
QUERY: RESPONSE:
{ {
coffee { "coffee": {
blend "blend": "rich"
} }
} }왼쪽에는 커피에서 블렌드 필드를 요청하는 GraphQL 쿼리가 있습니다. 이것은 데이터 구조가 무엇인지 정확히 알 때 잘 작동하지만 투명성이 떨어지는 경우는 어떻습니까? 이 예에서 blend는 우리에게 문자열을 반환하지만 쿼리를 사용하여 객체를 요청할 수도 있습니다.
QUERY: RESPONSE:
{ {
coffee { "coffee": {
beans { "beans": [
blend {
} blend: "rich"
} },
} {
blend: "smooth"
}
]
}
}여기서 우리는 단순히 콩 객체를 요청하고 있으며 그 객체에서 필드 블렌드만 반환 됩니다. bean 배열의 각 객체에는 blend 이외의 다른 데이터가 포함되어있을 수 있지만 GraphQL 쿼리는 필요한 데이터 만 요청하여 응용 프로그램에 필요하지 않은 추가 정보를 잘라내는 데 도움이 됩니다.
그렇다면 이보다 더 구체적이어야 할 때는 어떻습니까? GraphQL은 많은 기능을 제공하지만 매우 강력한 데이터 요청을 허용하는 것은 쿼리에서 인수를 전달하는 기능입니다. 다음 예제를 보자.
QUERY: RESPONSE:
{ {
coffee(companyId: "2") { "coffee": {
beans { "beans": [
blend {
} blend: "rich"
} },
} {
blend: "smooth"
}
]
}
}우리가 보는 것은 인수 (이 경우 companyId)를 전달할 수 있다는 것입니다.이 인수는 하나의 특정 회사에서만 Bean을 반환하도록 합니다. REST를 사용하면 쿼리 매개 변수 및 URL 세그먼트를 통해 단일 인수 집합을 전달할 수 있지만 GraphQL은 모든 단일 필드를 쿼리하여 자체 인수 집합을 얻을 수 있습니다. 이를 통해 GraphQL은 요청 당 여러 API 반입을 위한 동적 솔루션이 될 수 있습니다.
별명(Aliases)
지금까지 모든 쿼리에는 반환 된 객체의 필드가 쿼리 자체의 필드 이름과 일치했습니다. 간단한 인수를 사용할 때 유용하지만 데이터 요청에서 다른 인수로 동일한 필드를 쿼리하려면 어떻게 해야 합니까? 별명을 입력 할 수 있습니다. 별명을 사용하면 필드 이름을 변경하여 리턴 된 데이터의 이름을 바꿀 수 있으므로 데이터 요청에 다른 인수를 사용할 수 있습니다. 커피 빈을 예로 들어 보겠습니다. 우리가 두 개의 서로 다른 회사 ID를 데이터를 반환하고 싶다면? 쿼리를 다음과 같이 구성합니다.
QUERY: RESPONSE:
{ {
company1: coffee(companyId: "1") { "company1": {
beans { "beans": [
blend {
} "blend": "rich"
} }
company2: coffee(companyId: "2") { ]
beans { },
blend "company2": {
} "beans": [
} {
} "blend": "fruity"
}
]
}
}여기서는 서로 다른 커피 쿼리가 쌓인 별칭 company1 및 company2에 대한 데이터를 요청합니다. 별칭은 정확한 데이터 요구 사항에 대한 요구 사항을 수정하는 강력한 도구가 될 수 있습니다.
변수 (Variables)
지금까지는 정확한 쿼리를 알고 있으므로 응용 프로그램에서 쿼리를 하드 코딩 할 수 있지만 대부분의 응용 프로그램은 이러한 필드가 동적이어야 합니다. 예를 들어, 사용자는 표시 할 커피 빈 회사를 목록에서 선택할 수 있습니다. 사용자가 어떤 커피 빈 회사를 선택했는지 미리 알 수 없으므로 이러한 요구 사항을 통과 할 방법이 필요합니다. 변수가 들어오는 곳입니다.
GraphQL 문서에는 변수를 사용하기 위해 해야 할 세 가지 사항이 있습니다.
- 쿼리의 정적 값을 $variableName으로 바꿉니다.
- $variableName을 쿼리에서 허용하는 변수 중 하나로 선언하십시오.
- variableName 전달 : 별도의 전송 관련 (일반적으로 JSON) 변수 사전의 값
실제로 이것은 데이터 쿼리가 다음과 같이 보일 것입니다.
query coffeeCompany(companyId: CompanyId) {
coffee(companyId: companyId) {
beans: {
type
}
}
}companyId를 JSON 객체로 전달할 수도 있습니다.
{
"companyId": "1"
}GraphQL 내에서 변수를 사용하면 현재 필요한 데이터 만 요청하므로 모든 쿼리 요청을 동적으로 만드는 강력한 방법입니다.
커피 쿼리
응용 프로그램의 목적을 위해, 우리는 커피 원두 만 검색하는 데이터를 요청할 수 있고 그 안에 필요한 모든 관련 필드를 포함 할 수 있는 쿼리가 필요합니다. Google의 데이터 요구 사항은 그렇게 복잡하지 않으므로 다음과 같이 표시됩니다.
{
coffee {
beans {
key
name
price
blend
color
productImage
}
}
}데이터 요청
이제 데이터를 요청하는 데 사용할 실제 코드를 살펴 보겠습니다. 모든 뷰의 컨테이너 인 App.js를 열고 앱을 시작할 때 데이터를 요청하기에 좋은 장소입니다.
클라이언트를 초기화하려고 합니다. 간단히 apollo-boost에서 ApolloClient를 가져 와서 서버 URL을 지정하면 됩니다. 브라우저에서 yq42lj36m9.sse.codesandbox.io를 실행하기 만하면 서버를 초기화해야 합니다. 때때로 서버 시간이 초과 될 수 있습니다. Expo가“네트워크 오류”와 같은 경고를 반환하면 브라우저에서 yq42lj36m9.sse.codesandbox.io를 다시 로드 하여 서버를 다시 초기화하십시오.
서버가 실행되면 다음과 같이 App.js 맨 위에 가져 오기 및 초기화를 추가하십시오.
// ./App.js
import ApolloClient from 'apollo-boost';
const client = new ApolloClient({ uri: 'https://yq42lj36m9.sse.codesandbox.io/' })다음으로, 데이터를 요청할 때 나중에 사용하기 위해 graphQL 쿼리를 어셈블하려고 합니다. 운 좋게도 graphql-tag 라이브러리는 이것을 간단하게 만듭니다. 다시 라이브러리 자체를 App.js로 가져와야 합니다.
// ./App.js
import gql from 'graphql-tag';이제 쿼리를 구조화 할 수 있습니다 :
// ./App.js
const QUERY = gql`
{
coffee {
beans {
key
name
price
blend
color
productImage
}
}
}다음 단계는 데이터 요청을 포함하도록 렌더링 기능을 수정하는 것입니다. 이를 위해 react-apollo 라이브러리를 사용하여 요청을 작성하면 응답에 따라 응답을 처리 할 수 있습니다. App.js에 새 가져 오기를 추가하십시오.
// ./App.js
import { ApolloProvider, Query } from 'react-apollo';그런 다음 렌더링 기능을 다음과 같이 변경하십시오.
// ./App.js
render() {
return (
<ApolloProvider client={client}>
<Query query={QUERY} >
{({ loading, error, data }) => {
if (loading || error) return <View />
return <View style={{ flex: 1 }}>
{this.state.isFontsLoaded ? <AppContainer /> : <View />}
</View>
}}
</Query>
</ApolloProvider>
);
}여기에서 이전에 생성 한 QUERY를 사용하여 필요한 데이터를 요청하고 있음을 알 수 있습니다. 현재는 로드 중이거나 데이터 요청에 오류가 있는 경우 빈 뷰를 렌더링 합니다. 실제로 이것은 관련 로드 및 오류 보기로 교체되지만 이 예에서는 비워 둡니다. 데이터가 반환 되면 평소와 같이 AppContainer를 렌더링 합니다. 데이터가 성공적으로 반환 되는지 확인하여 데이터가 통과하고 있는지 확인할 수 있습니다. 코드에 console.log (data)를 추가하여 터미널의 출력을 확인하여 확인할 수 있습니다. Apollo 서버가 문제 없이 실행되는 동안 커피 및 콩 필드가 있는 물체를 받아야 합니다.
컨텍스트 API를 사용하여 데이터 저장
우리는 데이터가 어느 정도 떨어져 있든 관계없이 모든 구성 요소에서 액세스 할 수 있는 데이터를 저장할 수 있는 곳이 필요합니다. 구성 요소에 도달하기 위해 여러 어린이를 통해 데이터를 전달하는 것이 가장 효율적인 방법은 아닙니다. 이 예제에서는 데이터 스토리지 요구가 상당히 단순하므로 Redux와 같은 복잡한 상태 관리 도구보다 React의 컨텍스트 API를 사용하는 것이 좋습니다. Context API를 사용하면 매번 소품을 전달할 필요 없이 컴포넌트 트리 아래로 전역 상태를 전달할 수 있으며 현재 예제에서는 이것으로 충분합니다.
Context API 외에 Redux의 이점은 크게 세 가지로 좁힐 수 있습니다.
- Redux는 시간 여행 디버거와 함께 제공됩니다
- 개발자에게 미들웨어 API를 제공하여 redux-sagas와 같은 도구에 액세스 할 수 있습니다.
- React 바인딩은 너무 많은 렌더링을 방지합니다
Context API를 사용하는 것이 더 간단 할 수는 없습니다. 기본적으로 <Provider /> 구성 요소를 만들어 모든 데이터를 저장하고 필요할 때 <Consumer /> 구성 요소를 만들어 데이터에 액세스 하면 됩니다.
공급자 만들기
App.js로 돌아와서 공급자를 시작하기 위해 몇 줄만 추가하면 됩니다. 먼저 AppContext를 만들어 시작하겠습니다. 저장된 데이터를 사용하려는 파일에서 이 파일에 액세스 해야 하므로 데이터를 내 보내야 합니다. AppContext를 만들려면 App.js에 다음 줄을 추가하십시오.
// ./App.js
export const AppContext = React.createContext({ data: { coffee: { beans: [] } } });여기서는 컨텍스트를 생성하고 빈 데이터로 초기화합니다. 다음으로, AppProvider를 GraphQL 서버에서 수신하는 데이터로 채우려 고합니다.
cCoffee 데이터 저장
제공자를 데이터로 업데이트하려면 GraphQL 데이터를 데이터 소품에 추가하는 동안 제공자의 App.js 렌더 기능에서 빈 컨테이너 보기를 변경하기 만하면 됩니다. 이것은 다음과 같습니다
// ./App.js
render() {
return (
<ApolloProvider client={client}>
<Query query={QUERY} >
{({ loading, error, data }) => {
if (loading || error) return <View />
return <AppContext.Provider value={data.coffee.beans} style={{ flex: 1 }}>
{this.state.isFontsLoaded ? <AppContainer /> : <View />}
</AppContext.Provider>
}}
</Query>
</ApolloProvider>
);
}여기에서 제공 업체에 빈 데이터 (data.coffee.beans)를 직접 저장하고 있음을 알 수 있습니다. 현재 필요한 모든 데이터를 보유하고 있지만 여전히 자리 표시 자 콘텐츠를 수정하고 있습니다. 이 퍼즐의 마지막 부분은 소비자를 사용하여 데이터를 렌더링 하도록 Home.js를 수정하는 것입니다.
앱 소비자 만들기
먼저 소비자를 사용하려면 AppContext를 이전부터 가져와야 합니다. 이를 위해서는 App.js에서 Home.js로 가져 오기만 하면 됩니다.
// ./src/Home.js
import { AppContext } from '../App';컨슈머 사용은 다른 React 컴포넌트와 같이 작동합니다. 현재의 목적으로 렌더링 함수에 추가하고 데이터를 사용하여 FlatList를 채 웁니다. 렌더링 함수는 다음과 같아야 합니다.
// ./src/Home.js
render() {
return (
<AppContext.Consumer>
{
(context) =>
<View style={styles.container}>
<Image style={styles.header} source={require('../assets/header.png')} />
<View style={{ marginLeft: 30, marginTop: 30 }}>
<Text style={styles.title}>COFFEE</Text>
<Text style={styles.subtitle}>SELECTION</Text>
</View>
<FlatList
style={styles.list}
data={context}
renderItem={({ item }) => <TouchableOpacity style={styles.block} onPress={() => this.props.navigation.navigate('CoffeePage', { item: item })}>
<Image style={styles.productImage} source={{ uri: item.productImage }} />
<Text style={styles.name}>{item.name}</Text>
<Text style={styles.price}>{item.price}</Text>
</TouchableOpacity>}
numColumns={2}
/>
</View>
}
</AppContext.Consumer>
);
}위 코드를 살펴보면 AppContext.Consumer가 GraphQL 데이터가 포함 된 컨텍스트를 제공한다는 것을 알 수 있습니다. 이 컨텍스트를 사용하여 FlatList 컴포넌트를 데이터 소품으로 전달하여 채 웁니다. 사용자가 커피 항목 중 하나를 클릭하면 데이터가 탐색 매개 변수를 통해 CoffeePage.js로 전달되어 해당보기에서 액세스 할 수 있습니다. 수정 된 파일을 저장하고 Expo에서 앱을 시작하면 완전히 채워진 FlatList가 표시됩니다.
요약
축하합니다! GraphQL을 사용하여 React Native를 사용하여 데이터를 검색하고 해당 데이터를 렌더링 했습니다. REST와 같은 시스템의 이점을 강조하면서 GraphQL 쿼리가 얼마나 강력한 지 배웠습니다. 다음 프로젝트에서 GraphQL을 사용하고 특히 데이터가 많은 응용 프로그램에서 데이터를 검색하는 데 얼마나 빠른지 스스로 판단하는 것이 좋습니다.
GraphQL을 더 자세히 살펴 보려면 GraphQL 문서의 "Queries and Mutations"섹션을 읽고 codesandbox.io를 사용하여 Apollo 서버를 직접 코딩하십시오.
이 프로젝트의 전체 코드는 GitHub에서 찾을 수 있으므로 리포지토리를 복제 / 포크하고 직접 개선하십시오!
- 이전글개인 정보 보호에 관심이 있는 사람들을 위한 자체 호스팅 분석 도구. 19.11.06
- 다음글함수형 프로그래밍이란 무엇입니까? 19.11.05