SendBird로 시작하는 React Native Chat Tutorial #1

이 글은 React Native와 SendBird JavaScript SDK를 이용하여 채팅을 구현해보는 내용의 첫번째 글입니다. 이 글에서는 다음과 같은 내용을 익힐 수 있습니다.

1. 간단한 React Native Application을 만들기
2. SendBird JavaScript SDK를 이용하여 React Native에서 SendBird에 접속하기
3. React Navigation을 사용하여 화면을 전환하기

본 튜터리얼을 이용해 채팅을 개발하기 위한 첫번째 단계로, 먼저 센드버드 대시보드에 가입해야 합니다.

1. React Native

React Native를 이용하면 JavaScript로 Android와 iOS 어플리케이션을 한번에 만들 수 있는 장점이 있으며, 이미 많은 기업들이 React Native를 이용하여 다양한 어플리케이션을 제작하고 있습니다.

과거 React Native Tutorial 글을 작성할 당시 버전이 0.20 이었는데, 어느새 0.49가 나와있을 정도로 업데이트가 활발하게 일어나고 있습니다. 이 글은 이에 맞춰 이전에 작성된 샘플을 최신 React Native 버전과 SendBird JavaScript SDK 버전에 맞추어 새로 구성하는 과정을 설명하는 내용입니다.

1.1. React Native 준비

React Native를 사용하기 위해서는 기본적으로 JavaScript를 사용할 수 있어야 합니다. 또한, React를 사용하고 있기 때문에 이에 대한 지식이 있으면 조금 더 수월하게 작업을 진행 할 수 있습니다.

Node.js가 설치가 되어 있어있다는 가정 하에, 두가지 방법으로 React Native를 시작할 수 있습니다. 첫번째 방법은 Create React Native App을 사용하는 방법이고, 또 다른 한가지 방법은  React Native CLI를 사용하는 방법입니다. React Native를 개발하기 위한 환경 구성에 대한 설명은 공식 홈페이지에 있는 Getting Started를 참고하면 쉽게 구성이 가능합니다. 이 글에서 소개하는 샘플은 React Native CLI를 사용하여 React Native 0.48.3 버전을 사용하여 제작되었습니다.

1.2. React Native 실행

React Native 프로젝트의 폴더 구성을 보면, index.android.js파일과 index.ios.js파일을 확인 할 수 있습니다. 이 두 파일이 각각 Android와 iOS부분을 담당하고 있는 파일 입니다. Android와 iOS를 각각 실행해보면 각 파일에 있는 문구들이 화면에 나타나는 것을 확인 할 수 있습니다.

Android와 iOS에 모두 적용하기 위해 각각의 파일에 모두 코드를 작성하는 불편함이 있습니다. 이 문제를 해결하기 위해 공통으로 작업할 폴더를 생성하고 이 폴더에서 작업한 내용을 index.android.js와 index.ios.js 파일에서 참조하여 사용하도록 설정하도록 하겠습니다.

프로젝트 폴에서 src라는 폴더를 생성하고 그곳에 App.js라는 파일을 생성하도록 하겠습니다. 그리고 index.android.js, index.ios.js, App.js 파일을 각각 아래와 같이 수정하도록 하겠습니다.

index.android.js와 index.ios.js 파일의 ‘[YOUR_PROJECT_NAME]’ 부분에는 각자의 프로젝트 이름과 동일한 값으로 해주어야 합니다. 이제 App.js파일에서 변경되는 값에 따라 Android와 iOS의 화면이 동일하게 변경되는 것을 확인 할 수 있습니다.

2. SendBird JavaScript SDK

SendBird JavaScript SDK를 이용하여 React Native에서 채팅 샘플을 제작해 보도록 하겠습니다.

2.1. View Design

React Native에서 기본적으로 제공하는 많은 Component들이 있습니다. 하지만, 기본적인 형태로만 구성이 되어 있어서 화면을 구성하고 꾸미다 보면 많은 코드를 작성하게 되고 그만큼 오랜 시간이 소요되게 됩니다. 그렇기 때문에 잘 구성된 Library를 사용하여 제작 시간을 단축시키도록 하겠습니다. 이번에 소개할 Library는 React Native Elements입니다. 다양한 UI Component들을 제공하고 있고 완성도도 높은 Library이니 한번씩 사용해 보시길 추천합니다.

App.js에 UserID와 Nickname을 받아 접속을 하는 Form을 작성해 보도록 하겠습니다.

2.2. Connect to SendBird

이제 SendBird JS SDK를 설치하여 SendBird로 접속하는 부분을 구현해 보도록 하겠습니다. 아직 화면을 하나밖에 구성하지 못하여 접속 후 변화를 확인 할 방법이 없습니다. 그렇기 때문에 React Native에서 제공하고 있는 Debug JS Remotely기능을 이용하여 정상 동작 여부를 확인하도록 하겠습니다. Debug JS Remotely는 command + D를 누르면 나타나는 옵션에서 확인 할 수 있습니다.

이 기능을 이용하면 화면이 아직 구성되지 않은 상태에서 데이터를 확인하고 제작하는데 많은 도움을 받을 수 있습니다. 다시 command + D 를 눌러서 나타나는 메뉴를 이용하여 이 기능을 멈출 수 있습니다.

SendBird 접속을 위해 SendBird JS SDK를 설치하고 코드 수정 후, debug mode를 이용하여 접속 성공 여부를 확인해 보도록 하겠습니다. 사용될 APP_ID는 9DA1B1F4-0BE6-4DA8-82C5-2E81DAB56F23 이며, 이 APP_ID는 SendBird Web Basic Sample 및 SendBird Widget Sample 등 다양한 샘플에서 사용되고 있는 APP_ID입니다.

npm install SendBird --save

UserID를 Test123으로하고 nickname을 123test로 작성하여 SendBird에 접속시도를 한 결과는 다음과 같습니다. 위에서는 SendBird의 connect함수와 updateCurrentUserInfo 함수가 사용되었습니다. SendBird의 다양한 기능에 대해서는 공식 문서를 확인하시기 바랍니다.

3. React Navigation

SendBird에 접속을 하거나 화면에서 특정 행동을 취했을때, 화면을 전환하기 위한 navigation들중 유명한 것들이 몇가지 있습니다.

• react-navigation
• react-native-navigation
• react-native-router-flux

이 샘플에서는 React Native 공식 페이지에 소개되어 있는 react-navigation을 사용하도록 하겠습니다. React Navigation 공식 페이지에 docs와 expo로 확인이 가능한 demo가 잘 준비되어 있습니다. 작업 전에 한번씩 확인해 보면 많은 도움이 될 것이라 생각합니다.

React Navigation에는 TabNavigator, DrawerNavigator, StackNavigator 라는 navigator 기능들이 있습니다. 그 중에서 StackNavigator를 이용하여 샘플의 화면을 구성해 보도록 하겠습니다. StackNavigator는 Android나 iOS에서 많이 사용되는 화면 전환 방법과 유사한 방법으로 화면이 전환되어 가장 친숙하게 활용할 수 있는 navigator입니다.

npm install --save react-navigation

StackNavigator를 사용하기 위해 앞으로 다음과 같이 파일 구성을 변경하도록 하겠습니다.

• App.js : StackNavigator를 관리하는 파일
• screens : StackNavigator에 사용될 화면들이 모여 있는 폴더

screens폴더를 src폴더 하위에 생성 후, 기존에 작성된 App.js는 Login.js 라는 이름으로 변경하여 screens폴더 밑으로 옮기도록 하겠습니다. 또한, SendBird 접속 후 화면에 보여줄 Menu.js라는 파일을 생성하고 App.js, Login.js, Menu.js 세개의 파일을 다음과 같이 각각 수정하도록 하겠습니다.

App.js파일에는 StackNavigator에서 사용될 화면들을 정의하는 코드로 수정되게 됩니다. 선언된 MainNavigator에 있는 key는 항상 유일한 값이어야 하는 부분을 주의하시기 바랍니다. value에 해당하는 object에에서 screen은 실제로 화면에 나타날 파일을 지정해야 합니다.

기존의 App.js파일을 Login.js로 이름을 변경하고, screens폴더 아래로 이동했습니다. navigator와 관련되어 코드가 조금 수정되었습니다.

• 7 line: StackNavigator에서 기본적으로 제공되는 header에 title을 지정하는 코드가 추가되었습니다.
• 44 line: SendBird 접속 및 nickname 수정이 완료가 되면, 모든 값을 초기화하고 Menu.js화면으로 이동하도록 수정되었습니다.

Login.js에서 SendBird 접속에 성공하면 나타날 화면을 구성한 Menu.js파일입니다. 기본적인 동작 방식을 확인하기 위하여 간단하게 제작되었고, 향후 이 파일을 수정하여 다양한 화면들로 이동하도록 제작될 예정입니다.

위의 화면은 수정된 Login.js화면과 SendBird접속 후 navigate명령을 통해 Menu화면이 나타난 화면입니다.

화면을 확인해 보면, Login.js와 Menu.js의 navigationOptions에 지정한 title이 각각의 header에 나타나고 있는 것을 확인 할 수 있습니다. 뿐만아니라, StackNavigator에서 기본으로 제공해주는 뒤로가기 버튼이 Menu화면의 header에 자동으로 생성된 것을 확인 할 수 있습니다. StackNavigator를 이용하면 위의 코드처럼 간단한 작업으로 화면 전환을 이용할 수 있습니다.

여기까지 React Native 설치와 실행, SendBird 접속과 StackNavigator에 대해서 간단하게 진행해 봤습니다. React Native Elements및 React Navigation에는 이 글에서 소개해드린 것들 외에도 많은 기능들이 있으니 한번씩 확인해 보면 다양한 프로젝트를 진행하는데 많은 도움이 될거라 생각합니다.

다음 글에서는 SendBird SDK 및 React Navigation의 다른 기능들에 대해서 살펴보도록 하겠습니다. 감사합니다.