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

1. Redux

React Native에서 제공되는 기능들과 다양한 컴포넌트 오픈 소스, 그리고 네비게이터를 이용하면 멋진 애플리케이션을 개발할 수 있습니다. 하지만, 애플리케이션의 규모가 커지고 구조가 복잡해지면서 각 화면들과 데이터를 관리하다보면 어렵고 귀찮은 상황들이 많이 발생하게 됩니다. 이 문제를 해결하도록 도와주는 도구중 한 가지가 Redux입니다.

이 글에서는 Redux에 대한 자세한 설명은 하지 않습니다. Redux에 대한 자세한 내용은 Redux공식 문서를 참고하시기 바랍니다.  추가적으로 만화를 이용하여 잘 설명된 블로그를 소개합니다.

• A cartoon guide to Flux: https://code-cartoons.com/a-cartoon-guide-to-flux-6157355ab207
• A cartoon intro intro to Redux: https://code-cartoons.com/a-cartoon-intro-to-redux-3afb775501a6

다음 화면은 작성자가 사용하는 폴더 구조 입니다. 용도에 따라 폴더를 구분하여 나눈 모습이며, 아래의 폴더 구조를 참고하여 프로젝트의 폴더를 구성해 보시기 바랍니다.

폴더 구조는 크게 actions, components, reducers, screens, sendbirdActions, store 로 구성되어 있습니다.

1.1. Actions

actions폴더에는 애플리케이션에서 사용하는 명령어(type)와 함수(function)들이 모여 있습니다. 간단한 프로젝트에서는 양이 많지 않기 때문에 하나의 파일에 작성하는 경우도 있지만, 관리가 어려워지는 경우 화면별로 파일을 구분하는것이 관리하는데 더 수월합니다.

• types.js: 애플리케이션에서 사용되는 명령어들이 모여 있는 파일
• index.js: 다른 파일에서 actions 함수들을 사용하기 위한 파일
• loginActions.js: Login화면에서 사용될 함수들이 모인 파일

actions폴더는 위와 같이 구성되어 있습니다. 앞으로 작업을 진행하면서 화면에 따라 Actions.js을 생성하여 관리하게 됩니다.

1.2. Reducers

reducers폴더는 리듀서(reducer)로 구성된 폴더입니다. 리듀서는 action에서 상태(state)를 받아서 전달하는 역할을 합니다. 리듀서의 역할은 “상태의 전달”에 중심을 두고 있기 때문에, 특별히 상태를 변경하는 등의 작업을 하지 않습니다.

• index.js: reducers에 있는 다양한 리듀서들을 합치는 파일
• loginReducers.js: Login화면의 리듀서

reducers폴더에도 actions폴더와 마찬가지로 화면에 따라 Reducers.js파일을 생성하여 관리하게 됩니다.

1.3. store

store폴더에는 index.js 파일 하나만으로 구성되게 됩니다. 비동기 통신을 사용하기 위해 redux-thunk를 사용하거나 기타 다른 미들웨어를 설정하는 일을 합니다.

• index.js: store 설정 파일

1.4. Screens & Components

screens폴더와 components폴더는 화면을 구성하는 파일들로 구성됩니다. screens 폴더는 여러개의 컴포넌트(component)로 구성되며 객체나 데이터를 관리하는 역할을 합니다. components폴더는 화면에서 구성되는 다양한 UI 컴포넌트들로 구성이 되어 있습니다.

• screens: 다양한 컴포넌트로 구성이 되며 데이터를 관리
• components: 화면을 구성하는 UI컴포넌트

1.5. sendbirdActions

actions폴더에 구성된 파일에서 다양한 명령과 함수들이 구성되어 있지만, 따로 action들을 분리해서 관리하는 것도 한가지 방법입니다. SendBird에서 제공되는 다양한 함수들을 사용하면서 SendBird의 동작들과 애플리케이션에서 사용할 동작을 구분하여 관리하기 위해 sendbirdActions폴더를 따로 구성하도록 하겠습니다.

2. Sample Application

이전 글에서 완성한 로그인 화면을 위의 폴더 구조에 맞추서 수정해 보도록 하겠습니다. 전체 구조는 다음과 같습니다.

redux를 사용하기 때문에 아래의 명령을 통해 라이브러리를 설치하도록 하겠습니다.

npm install --save redux react-redux redux-thunk 

2.1. sendbirdActions

SendBird에서 제공하는 기능을 관리하는 파일을 먼저 생성하도록 하겠습니다. 우리가 지금까지 만든 로그인 화면에서 connect함수와 updateCurrentUserInfo함수는 유저에 대한 함수이니, user.js 파일을 생성하여 아래와 같이 작성하도록 하겠습니다.

2.2. Actions

현재 구성된 로그인 화면에서 SendBird로 접속하기 위한 코드를 호출하는 부분을 action파일에 작성하도록 하겠습니다.

SendBird  접속에 실패했을 경우와 성공했을 경우 각각 전달될 명령어를 types.js에 정의하고,  SendBird에 접속하기 위해 sbConnect함수를 호출하도록 작성되었습니다.

2.3. Reducers & Store

이제는 action에서 SendBird접속 성공 실패 여부에 따라 전달되는 명령어를 보고 screen으로 상태를 전달하는 코드를 작성하도록 하겠습니다.

loginReducer.js파일에서는 전달되는 명령어에 따라 상태를 변화하여 전달하는 코드가 작성되었습니다. 리듀서의 index.js에서는 분리되어 작성되는 리듀서들을 합치는 코드가 작성되었습니다. actions 와 마찬가지로 reducers에도 화면에 따라 파일이 하나씩 생성을 하여 관리고, 이렇게 나눠진 index.js에서 합쳐주는 작업을 해주어야 합니다.

store에서 비동기 통신을 위한 redux-thunk를 설정하고, App.js파일을 수정합니다. App.js에서 사용된 Provider 컴포넌트는 react-redux라이브러리의 connect함수를 이용하여 연결 할 수 있도록 애플리케이션의 store를 제공하는 역할을 합니다.

2.4. Screens & Components

이제 screens폴더에 있는 Login.js파일에서 actions로 역할을 넘긴 부분을 수정하고 prop을 연결해 주기 위하여 react-redux라이브러리의 connect를 이용하여 연결해 주도록 하겠습니다.

error는 action에서 SendBird에 접속을 시도한 결과에 따라 값이 변화하기 때문에 screen에서 관리하기 보다는 리듀서에서 상태의 변화로 관리하는 것이 조금 더 편합니다.

접속에 성공을 하게 되면 전달되는 user의 값을 확인하여 Menu화면으로 이동하는 코드가 추가되었습니다. componentWillReceiveProps함수는 prop에 변화가 있을때 호출이 되는 함수며, prop의 변화가 없을때는 동작하지 않는 함수 입니다. 이 함수를 이용하여 사앹의 변화에 따라 동작을 지정할 수 있습니다.

다양한 컴포넌트를 사용하여 관리하다보면, 너무 많은 곳에서 컴포넌트를 가져오게 됩니다. 위의 화면과 같이 components에 사용하는 컴포넌트들을 모아놓으면, 사용하는 컴포넌트를 관리하기 편한 장점이 있습니다.

애플리케이션을 실행하면 기존의 작업과 동일하게 동작하는 것을 확인 할 수 있습니다.

2.5 동작방식

Redux를 적용한 애플리케이션의 동작 과정은 다음과 같습니다.

1. screen에서 이벤트가 발생한다
2. action의 함수가 호출된다.(sendbirdAction의 함수가 호출된다)
3. store의 dispatch함수가 호출된다.
4. reducer가 호출된다.
5. screen을 갱신한다.

애플리케이션을 개발할때 위의 흐름에 맞추어 작업을 하면, 디버깅도 수월하며 조금 더 쉽게 개발이 가능합니다.

이번 글에서는 이전에 작업한 로그인 화면에 redux를 적용하는 과정을 살펴봤습니다. 폴더와 파일 구조는 반드시 위의 구조를 따를 필요는 없지만, 위의 폴더 구조를 참고하여 작업하면 조금 더 수월하게 작업이 가능합니다. 감사합니다.