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

1.1. 화면 이동

우선 채팅이 출력될 Chat.js파일을 screens폴더 아래에 생성하고, OpenChannel.js파일에서 해당 화면으로 이동이 가능하도록 수정하는 작업을 진행하겠습니다.

OpenChannel.js 파일의 55번째 줄에 있는 _onListItemPress라는 함수는 OpenChannel 목록중 하나를 클릭했을때 발생하는 이벤트 입니다. 이곳에서 Chat.js로 이동하는 코드가 추가되었습니다.

예제에서 사용하고 있는 React Navigation의 navigate함수에는 이동하는 화면을 지정하는 것 뿐만 아니라, 변수와 함수를 함께 전달할 수 있습니다. 이 기능을 이용하여, Chat.js로 이동을 하면서 현재 접속하는 채널의 url을 함께 전달하도록 작성되었습니다.

1.2. Chat 화면

SendBird에서 전달되는 메시지는 다음과 같이 구성되어 있습니다.

• channelUrl: 메시지가 전송되는 채널의 url
• messageId: 메시지의 ID
• reqId: 메시지의 임시 ID
• message: 메시지
• customType: 메시지의 사용자 지정 타입
• data: 메시지의 사용자 지정 데이터
• sender: 메시지 송신자
• createdAt: 메시지 전송 시간
• updatedAt: 메시지 수정 시간

SendBird JavaScript SDK의 SendBird.d.ts를 참고하면 조금 더 자세한 구성을 확인하실 수 있습니다.

채팅 화면에서 가장 중요한 부분은 메시지를 주고 받고, 해당 메시지들을 출력하는 부분입니다. 메시지를 보여주는 컴포넌트는 계속 재사용되니 이 컴포넌트를 만들어서 재사용 하도록 하겠습니다.

텍스트를 입력하는 부분도 컴포넌트로 제작해 보도록 하겠습니다.

작성된 Message 컴포넌트와 MessageInput 컴포넌트를 이용하여 Chat 화면을 구성하는 코드는 다음과 같습니다.

메시지를 React Native에서 제공하는 ListView 컴포넌트를 사용했습니다. ListView는 Android나 iOS의 그것과 유사한 컴포넌트입니다. 메시지를 출력하는 화면에서 과거의 메시지를 불러오면 화면의 상단에 이어 붙이게 됩니다. 따라서, 목록을 가장 위로 올렸을때 과거의 메시지를 요청해야 하는데 ListView컴포넌트는 목록의 상단에 도착했을때 이벤트를 제공하고 있지 않습니다.

ListView는 ScrollView로 구성이 되어있고 ScrollView에 있는 onScroll이라는 프로퍼티를 이용하여 스크롤의 위치에 따라 이벤트를 호출할 수 있습니다. 하지만, ListView에서 제공하고 있는 onEndReached라는 기능이 있기때문에 이 예제에서는 이를 활용하는 방법으로 제작되었습니다.

스크롤의 위치가 가장 위로 갔을때 onEndReached를 이용하여 과거 메시지를 불러오기 위해서는 ListView가 뒤집어져 있어야 합니다(Chat.js line 197). ListView가 뒤집어지면 출력되는 텍스트도 뒤집어 지기 때문에 Message 컴포넌트에서 다시 뒤집어줘서 정상적으로 출력되도록 작성되었습니다(Message.js line 41).

Chat화면 동작을 위한 actions와 reducers는 다음과 같습니다.

SendBird에서 제공하는 핸들러 중에서 onMessageReceived는 메시지가 도착했을때 메시지가 전달된 채널과 메시지를 인자로 전달하여 호출됩니다. 단, 메시지를 전송한 송신자에게는 전달이 되지 않기때문에 message전송 함수인 sendUserMessage함수의 콜백에서 추가적인 처리를 해주는것을 권장합니다(sendbirdActions/chat.js line 26, actions/chatActions.js line 99).

예제에서는 문자 기반의 메시지인 UserMessage를 이용하여 메시지를 전송하는 부분이 구현되었습니다. UserMessage에는 각 메시지에 사용자 임의의 타입을 지정하는 등의 기능이 있습니다. 또한, SendBird에서는 그 외에도 FileMessage와 AdminMessage라는 UserMessage와 다른 타입의 메시지 기능을 제공하고 있습니다.

SendBird SDK의 공식문서와 저장소의 SendBird.d.ts 파일을 통해 조금 더 다양한 기능을 확인하실 수 있습니다. 조금 더 다양한 기능이 추가된 예제는 SendBird JavaScript 저장소에서 확인하실 수 있습니다. 감사합니다.