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

1. Menu 구성하기

1.1. Disconnect

메뉴 화면은 4가지 화면으로 이동하는 버튼을 제공하는 화면으로 구현하도록 하겠습니다.

• Profile: 사용자의 nickname등을 변경하는 버튼
• OpenChannel: OpenChannel을 이용하는 버튼
• GroupChannel: GroupChannel을 이용하는 버튼
• Disconnect: 접속을 종료하는 버튼

접속종료(Disconnect) 기능을 이용하여 로그인 화면으로 돌아가는 기능이 있기 때문에, 다음과 같이 로그인 화면을 수정하도록 하겠습니다.

• line 4: StackNavigator를 새로 구성하기 위해 NavigationActions를 가져옵니다.
• line 24~32: StackNavigator를 reset함수를 이용하여 새로 구성합니다.

앞선 글에서 설명한것처럼 Menu화면의 action, reducer, screen를 다음과 같이 작성하도록 하겠습니다.

SendBird의 기능중 disconnect를 사용하기 위해 sendbirdActions의 user.js에 함수가 추가되고, menuActions.js에서 해당 함수를 이용하도록 작성되었습니다.

menuActions.js에서 전달되는 명령어의 종류에 따라 상태를 변화하여 screen으로 알려주는 코드가 작성되었습니다.

• line 21~34: Disconnect가 완료되면 StackNavigator를 다시 구성하여 로그인 화면으로 이동하도록 구현되었습니다.
• line 48~50: Disconnect버튼을 클릭하면 menuActions.js에 구현되어 있는 sendbirdLogout함수를 호출합니다.

1.2. 동작방식

다음과 같이 앞선 글에서 설명한것과 동일한 방식으로 진행이 됩니다.

1. 메뉴 화면에서 Disconnect버튼을 클릭하면 Actions의 sendbirdLogout함수가 호출됩니다.
2. Actions의 sendbirdLogout함수는 sendbirdActions의 sbDisconnect함수를 호출하고, 그 결과를 넘겨줍니다.
3. 리듀서는 넘어온 명령어에 따라 현재의 상태를 돌려줍니다.
4. 상태의 변화를 감지하여 다시 로그인 화면으로 이동합니다.

앞으로 제작되는 화면들은 모두 동일한 방식으로 동작하며, 위의 흐름으로 제작을 진행하면 어렵지 않게 원하는 화면을 만드실 수 있습니다.

2. Profile 수정

2.1. 버튼 생성하기

SendBird의 updateCurrentUserInfo함수를 이용하여, 현재 접속한 사용자의 정보를 확인 및 수정하는 페이지를 제작해 보도록 하겠습니다. 완성된 화면은 아래와 같습니다.

헤더의 오른쪽에 저장 버튼을 생성하기 위하여 navigationOptions의 headerRight의 설정이 필요합니다. 이곳에서 actions의 함수를 지정하면 해당 함수가 정의되지 않았다는 에러 메시지가 나타납니다.

이 문제를 해결하기 위해서 Profile화면을 생성하면서 navigator의 param을 수정하고 해당 값을 지정해 주는 코드가 필요합니다.

• line 18~27: 저장 버튼을 생성하기 위한 코드
• line 40: setParams함수를 이용하여 저장 버튼에 함수를 지정하기 위한 코드

2.2. Profile 수정하기

screen 외에 다른 코드부분은 다음과 같습니다. actions에 함수를 생성하고, reducers에서 명령어에 따라 상태를 전달하는 코드는 다음과 같습니다.

user.js에 사용자의 정보를 수정하는 sbUpdateProfile함수를 작성하면서 기존에 있던 sbConnect함수를 수정하였습니다. 새로운 action, screen, reducer가 추가되었으므로, App.js와 reducers의 index.js, actions의 index.js에도 각각 추가해 주어야 정상적으로 동작을 합니다.

3. OpenChannel

3.1. OpenChannel

SendBird에는 두가지 종류의 채널이 있습니다. 공대된 채널로 누구나 자유롭게 입장해서 대화를 주고 받을 수 있는 OpenChannel과, 사용자의 초대를 통해 입장을 해서 대화를 하는 GroupChannel입니다.

OpenChannel은 라이브 스트리밍 서비스같이 많은 사용자가 자유롭게 입장해서 대화를 나누는 곳에 적절하고, GroupChannel은 메신저 같은 일대일 대화나 특정 사용자들로만 이루어진 그룹 대화에 적절한 채널입니다.

자세한 SendBird 기능 사용법은 공식 문서를 통해 확인하실 수 있습니다.

3.2.  OpenChannel List

OpenChannel의 목록을 SendBird에서 받아오기 위해서는 createOpenChannelListQuery 함수를 이용해야 합니다. 이 함수를 이용하여 SendBird에서 현재 생성되어 있는 OpenChannel의 목록을 받아오는 기능을 sendbirdActions의 openChannel.js에 구현해 보도록 하겠습니다.

createOpenChannelListQuery 함수를 통해 생성된 객체에는 현재까지 전달받은 채널 목록의 정보를 함께 저장하고 있습니다. 해당 정보를 기준으로 next함수를 호출할 때마다 다음 목록을 전달하고 있기 때문에, 만약 다시 첫 목록부터 받아오고 싶은 경우에는 createOpenChannelListQuery 함수를 이용하여 객체를 다시 생성해야 합니다.

• line 27~38: 상태가 변경이 있을때 화면을 변경합니다.
• line 59~65: 화면의 스크롤을 당겼을때, 첫 목록부터 다시 가져옵니다. 여러번 호출 되는 것을 방지하기 위해 refresh값으로 확인을 합니다.

메뉴 화면에서 OpenChannel화면으로 이동하기 위해, Menu.js파일에서 OpenChannel을 클릭했을때 이벤트를 다음과 같이 추가하고 App.js에서 새로 생성된 OpenChannel을 지정하도록 하겠습니다.

사용되는 actions와 reducers는 아래와 같이 추가되었습니다.

새로운 actions, reducer를 등록하기 위해 actions/index.js 파일과 reducers/index.js 파일에도 각각 추가해 주시면 다음과 같은 화면을 확인 할 수 있습니다.

앞서 소개된 createOpenChannelListQuery함수는 OpenChannel의 name이나 url로 검색이 가능하게 해주는 기능을 제공하고 있습니다. 뿐만 아니라, 한번에 받아오는 목록의 갯수를 지정하는 limit변수도 지정이 가능합니다. SendBird JavaScript SDK의 SendBird.d.ts 파일을 확인하시면 조금 더 다양한 기능을 확인하실 수 있습니다. 감사합니다.