---
title: Relay와 GraphQL로 React Native에서 현재 사용자 정보 조회하기
slug: docs-kr/react-native/graphql/users/react-relay-current-user
description: React Native 앱에서 GraphQL과 Relay를 사용하여 로그인된 사용자 데이터를 쿼리하고 표시하는 방법을 안내합니다.
image: https://www.back4app.com/images/logo-social.png
createdAt: 2024-03-20T13:43:03.385Z
---

# Relay를 사용하여 React Native 앱에서 현재 사용자 가져오기

## 소개

Relay를 사용하여 React Native 앱에 사용자 등록 및 로그인을 구현한 후, 다양한 작업 및 요청을 수행하기 위해 현재 로그인한 사용자 데이터를 검색해야 합니다. 이 가이드에서는 [로그인한 사용자 가져오기 GraphQL 요리책 가이드](https://www.back4app.com/docs/parse-graphql/graphql-get-current-user)와 [쿼리 렌더러](https://www.back4app.com/docs/react-native/graphql/relay-query-renderer)를 따라 현재 사용자에 대한 정보를 검색할 것입니다.

GraphQL로 표현된 쿼리는 다음과 같습니다:

```graphql
1	query Me {
2	  viewer {
3	    user{
4	      id
5	      createdAt
6	      updatedAt
7	      username
8	    }
9	    sessionToken
10	  }
11	}
```

:::hint{type="success"}
**언제든지 GitHub 리포지토리를 통해 이 프로젝트에 접근하여 스타일과 전체 코드를 확인할 수 있습니다.**

- [자바스크립트 예제 리포지토리](https://github.com/templates-back4app/react-native-graphql-relay-js-users)
:::

## 목표

현재 사용자에 대한 정보를 가져오는 컴포넌트를 생성합니다.

## 전제 조건

- Parse Server 버전 3.10 이상을 사용하여 Back4App에서 생성된 앱입니다.
- 다음의 [Relay 환경 설정 튜토리얼](https://www.back4app.com/docs/react-native/graphql/relay-setup):
- 다음의 [Relay를 사용한 React Native 로그인 샘플](https://www.back4app.com/docs/react-native/graphql/users/react-native-login-sample):
- 다음의 [React Native 사용자 로그인](https://app.archbee.com/docs/_roxIyUMXoBue9I7uv49e/6qyoyUmFLdRtjjy7dcgnr):
- 이번 튜토리얼에서는 React Native 프레임워크로 Expo를 사용할 것입니다;
- 이번 튜토리얼에서는 자바스크립트를 기본 구현 언어로 사용할 것입니다;

:::hint{type="success"}
**언제든지 GitHub 리포지토리를 통해 이 프로젝트에 접근하여 스타일과 전체 코드를 확인할 수 있습니다.**

- [JavaScript 예제 리포지토리](https://github.com/templates-back4app/react-native-graphql-relay-js-users)
:::

## 1 - 사용자 로그인 컴포넌트 생성

SignIn 컴포넌트 폴더에 새 파일을 만들고 이름을 <font color="#2166ae">`UserLoggedRenderer.js`</font>로 지정합니다.

안에 <font color="#2166ae">`UserLoggedRenderer.js`</font>, Query Renderer 튜토리얼과 매우 유사한 컴포넌트를 생성하겠습니다. 하지만 이 경우에는 쿼리 렌더러만 필요합니다. 유효한 세션 토큰이 애플리케이션에 들어가면, 컴포넌트가 호출되어 현재 사용자 정보를 가져옵니다.

쿼리 렌더러 컴포넌트는 다음과 같이 보일 것입니다:

```javascript
1	return (
2	  <QueryRenderer
3	    environment={environment}
4	    query={// @todo implement the query necessary}
5	    variables={null}
6	    render={({error, props}) => {
7	      if (error) {
8	        return (
9	          <View>
10	            <Text>{error.message}</Text>
11	          </View>
12	        );
13	      } else if (props) {
14	        // @todo implement a funcion to render the viewer
15	      }
16	      return (
17	        <View>
18	          <Text>loading</Text>
19	        </View>
20	      );
21	    }}
22	  />
23	);
```

첫 번째 @todo는 로그인한 사용자로부터 정보를 검색하는 쿼리로 구현되어야 합니다. 이 작업에 사용되는 쿼리는 [로그인한 사용자 가져오기 GraphQL 요리책 가이드](https://www.back4app.com/docs/parse-graphql/graphql-get-current-user).&#x20;

```graphql
1	graphql`
2	  query UserLoggedRendererQuery {
3	    viewer {
4	      user {
5	        id
6	        createdAt
7	        updatedAt
8	        username
9	      }
10	      sessionToken
11	    }
12	  }
13	
```

두 번째 @todo는 사용자에 대한 정보를 존재할 경우에만 렌더링하는 함수를 구현해야 합니다. 오류가 없으면 아래에 설명된<font color="#2166ae">`renderContent`</font> 함수를 반환할 것입니다. 이 함수는 현재 사용자 정보를(이메일 및 사용자 이름) 안전하게 렌더링합니다.

```javascript
1	const renderContent = (viewer) => {
2	  if (!viewer?.user) {
3	    return null;
4	  }
5	
6	  const {user} = viewer;
7	
8	  return (
9	    <View style={ {marginTop: 15, alignItems: 'center'} }>
10	      <Text>User {user?.username || user?.email} logged</Text>
11	    </View>
12	  );
13	};
```

쿼리 렌더러 컴포넌트 전에 함수를 구현해야 합니다. 컴포넌트의 최종 결과는 다음과 같아야 합니다:

```javascript
1	import React from 'react';
2	import {graphql, QueryRenderer} from 'react-relay';
3	import environment from '../../relay/environment';
4	import {Text, View} from 'react-native';
5	
6	const UserLoggedRenderer = () => {
7	  const renderContent = (viewer) => {
8	    if (!viewer?.user) {
9	      return null;
10	    }
11	
12	    const {user} = viewer;
13	
14	    return (
15	      <View style={ {marginTop: 15, alignItems: 'center'} }>
16	        <Text>User {user?.username || user?.email} logged</Text>
17	      </View>
18	    );
19	  };
20	
21	  return (
22	    <QueryRenderer
23	      environment={environment}
24	      query={graphql`
25	        query UserLoggedRendererQuery {
26	          viewer {
27	            user {
28	              id
29	              createdAt
30	              updatedAt
31	              username
32	            }
33	            sessionToken
34	          }
35	        }
36	      `}
37	      variables={null}
38	      render={({error, props}) => {
39	        if (error) {
40	          return (
41	            <View>
42	              <Text>{error.message}</Text>
43	            </View>
44	          );
45	        } else if (props) {
46	          return renderContent(props.viewer);
47	        }
48	        return (
49	          <View>
50	            <Text>loading</Text>
51	          </View>
52	        );
53	      }}
54	    />
55	  );
56	};
57	
58	export default UserLoggedRenderer;
```

## 2 - SignIn 컴포넌트에 UserLoggedRenderer 가져오기

FormSignIn 컴포넌트로 돌아가서 현재 사용자 정보를 반환하는 코드를 새로운 사용자 로그인 컴포넌트로 교체하세요.

에서

```javascript
1	  if (sessionToken) {
2	     console.warn(sessionToken);
3	     return (
4	       <View style={ { marginTop: 15, alignItems: 'center' } }>
5	         <Text>User logged</Text>
6	       </View>
7	     );
8	   }
```

로

이제 <font color="#2166ae">`yarn relay`</font> 명령어를 실행하여 새로운 쿼리로 업데이트하세요:

<font color="#2166ae">`yarn relay`</font>

::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/rphO0ccrDfSPmfDQ8kR4A_image.png" size="70" width="636" height="268" position="center" showCaption="false"}

이제 유효한 세션 토큰이 있는 사용자 이름 또는 이메일이 표시됩니다. 그렇지 않으면 컴포넌트가 렌더링되지 않으며, 로그인 프로세스가 실행됩니다.

또한, useState <font color="#2166ae">`userLogged`</font>는 더 이상 의미가 없으므로 코드에서 제거할 수 있습니다.

완료된 함수에서 LogIn 변이로부터 그것을 제거하는 것을 잊지 마세요.

::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/HagVjHmYJezVZGVbukt_-_image.png" size="60" width="828" height="1792" position="center" showCaption="false"}

## 결론

이 단계의 최종 결과는 마지막 단계와 동일해야 합니다. 그에 대한 정보가 표시되지만 이제 사용자 이름 또는 이메일이 뒤따릅니다.

다음 문서에서는 이 사용자의 로그아웃을 수행하고 세션을 정리하여 앱을 로그인 또는 가입 흐름으로 되돌리는 버튼을 만들어 보겠습니다.