---
title: 리액트 네이티브 Relay 로그아웃 구현 가이드
slug: docs-kr/react-native/graphql/users/react-relay-user-logout
description: React Native 앱에서 릴레이와 GraphQL로 사용자 로그아웃을 구현하는 방법을 배워보세요.
image: https://www.back4app.com/images/logo-social.png
createdAt: 2024-03-20T13:50:47.868Z
---
# 리액트 네이티브 사용자 로그아웃
## 소개
이 단계에서는 Relay를 사용하여 리액트 네이티브의 사용자 로그아웃을 생성합니다. 이는 이 사용자의 섹션에 대한 마지막 구현입니다. 이 단계는 간단하며 우리는 [GraphQL 로그아웃 가이드](https://www.back4app.com/docs/parse-graphql/graphql-logout-mutation)를 우리의 GraphQL 요리책에서 따를 것입니다. 로그아웃 뮤테이션을 구현하고 리액트 네이티브 애플리케이션의 버튼을 사용하여 호출할 것입니다.
:::hint{type="success"}
**언제든지 이 프로젝트에 접근하여 스타일과 전체 코드를 확인할 수 있습니다.**
- [자바스크립트 예제 저장소](https://github.com/templates-back4app/react-native-graphql-relay-js-users)
:::
## 목표
Relay와 Back4App GraphQL API를 사용하여 React Native 앱에 로그아웃 기능을 구현합니다.
## 전제 조건
- 이 튜토리얼에서는 4.4 버전의 Parse Server를 사용할 것입니다. 다른 버전을 사용하고 싶다면 [GraphQL 로그아웃 가이드](https://www.back4app.com/docs/parse-graphql/graphql-logout-mutation)에 대한 해당 변형 코드를 확인할 수 있습니다.
- 다음의 [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):
- 이 튜토리얼에서는 Expo를 React Native 프레임워크로 사용할 것입니다;
- 이 튜토리얼에서는 자바스크립트를 기본 구현 언어로 사용할 것입니다;
## 1 - 로그아웃 변형 만들기
다시 SignIn 폴더로 돌아가서 mutations 폴더에 새 파일을 만들고 이름을 `LogOutMutation.js`로 지정합니다.
다음 코드를 복사하여 붙여넣으세요:
```javascript
1 import { commitMutation, graphql } from 'react-relay';
2
3 const mutation = graphql`
4 mutation LogOutMutation($input: LogOutInput!) {
5 logOut(input: $input) {
6 clientMutationId
7 }
8 }
9 `;
10
11 function commit({ environment, input, onCompleted, onError }) {
12 const variables = { input };
13
14 commitMutation(environment, {
15 mutation,
16 variables,
17 onCompleted,
18 onError,
19 });
20 }
21
22 export default {
23 commit,
24 };
```
터미널에 `yarn relay`를 실행하여 릴레이 타입을 업데이트하세요:
::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/SAkFpoBSkoDk028w_ShEl_image.png" size="70" width="632" height="252" position="center" showCaption="false"}
## 2 - 로그아웃 버튼 만들기
이제 `FormSignIn.js` 컴포넌트를 엽니다. 로그아웃 버튼을 추가하고 릴레이 뮤테이션을 호출해 보겠습니다.
파일의 시작 부분에 새로운 릴레이 뮤테이션을 가져옵니다:
```javascript
1 import LogOutMutation from "./mutations/LogOutMutation";
```
그런 다음 로그아웃 뮤테이션을 호출하는 함수를 만듭니다:
```javascript
1 const handleLogout = async () => {
2 LogOutMutation.commit({
3 environment: environment,
4 input: {},
5 onCompleted: async () => {
6 await AsyncStorage.removeItem('sessionToken');
7 setSessionToken(null);
8 alert('User successfully logged out');
9 },
10 onError: (errors) => {
11 alert(errors[0].message);
12 },
13 });
14 };
```
무슨 일이 일어나고 있는가 `onCompleted`:
- **세션 토큰이 더 이상 유효하지 않기 때문에 Async Storage에서 제거하고 있습니다.**
- **위와 같은 이유로 세션 토큰을 가져오는 로컬 useState를 정리하고 있습니다.**
- **사용자가 성공적으로 로그아웃되었다는 알림을 표시합니다.**
그 후, UserLoggedRenderer 바로 아래에 로그아웃을 호출하는 버튼을 구현해 보겠습니다:
에서:
```javascript
1 if (sessionToken) {
2 return ;
3 }
```
에
```javascript
1 if (sessionToken) {
2 return (
3 <>
4
5