프리랜스 프론트엔드 개발자로 일하다 보면, 평소에는 시간을 내기 어려운 새로운 기술을 가끔씩 탐구해 보곤 합니다. 최근에는 React Native를 공부하며 여러 새로운 도구와 API를 살펴보고 있습니다.
그런데 네이티브 앱을 만드는 일은 웹 앱을 만드는 것과 조금 다릅니다. 최근에 사용자의 인터넷 연결이 끊긴 상황을 마주하게 되었는데요.
이럴 때 우리 앱의 기능이 제한적이라는 사실을 사용자에게 어떻게 알려줄 수 있을까요?
네트워크 오류 처리가 중요한 이유
네트워크 연결이 필수인 앱을 개발할 때는 요청 실패에 대한 적절한 처리가 반드시 필요합니다. 예를 들어, 사용자의 인터넷 연결이 갑자기 불안정해지는 경우를 생각해 볼 수 있죠.
앱이 요청 실패의 원인을 사용자에게 알려주거나, 아예 불필요한 요청 자체를 막을 수 있다면 좋겠습니다. 더 나아가 현재 무슨 일이 일어나고 있는지 설명하는 유용한 메시지를 보여준다면, 사용자는 그에 맞춰 적절히 대응할 수 있습니다.
즉, 앱이 특정 요청을 수행할 수 없는 맥락(context)을 사용자에게 제공할 수 있는 것입니다.
Redux vs. Context API
React Native 커뮤니티는 사용자의 네트워크 연결 정보(온라인/오프라인 여부 등)를 제공하는 NetInfo 모듈을 제공합니다. 그런데 이 데이터를 앱 전역에서 사용할 수 있어야 하겠죠.
흔히 떠올릴 수 있는 방법은 Redux를 사용하는 것입니다. 이미 앱에서 Redux를 사용하고 있다면, 굳이 다른 도구를 쓸 필요가 있을까 싶기도 합니다.
물론 가능합니다. 하지만 이 연결 상태 정보를 활용하려면 모든 컴포넌트를 Redux 스토어에 연결해야 합니다. Redux를 연결하는 작업은 오버헤드를 만들고 코드량을 늘리며, 앱을 불필요하게 복잡하게 만들 수도 있습니다.
다른 방법을 살펴보겠습니다.
React의 Context API는 이런 상태성 데이터를 컴포넌트 전반에 공유할 수 있는 더 간단하고 깔끔한 방법을 제공합니다.
Context는 현재 인증된 사용자, 테마, 선호 언어처럼 React 컴포넌트 트리 전체에서 '전역적'이라고 볼 수 있는 데이터를 공유하기 위해 설계되었습니다.
React의 Context API를 사용하기에 완벽한 use case인 셈입니다!
본격적으로 시작하기
먼저 필요한 패키지를 설치해야 합니다. React Native 0.59부터는 NetInfo 모듈이 별도 패키지로 분리되었기 때문입니다. 또한 render 메서드 외부에서 context를 사용할 수 있게 해주는 React 16.6 이상이 필요합니다. 덕분에 context를 어디서든 더 유연하게 활용할 수 있습니다.
React Native 앱 설정 과정은 생략하고, 이미 앱이 준비되어 있다고 가정하겠습니다.
NetInfo 패키지를 설치합니다:
npm install @react-native-community/netinfo --save설치가 완료되면 컴포넌트를 만들어 보겠습니다.
1. Context Provider 만들기
<NetworkProvider> 컴포넌트를 설정합니다. 이 컴포넌트는 연결 상태를 모든 자식 컴포넌트에 전달합니다:
위 코드에서는 connectionChange 이벤트만 리스닝하면 됩니다. 이 이벤트는 인터넷 연결이 활성화되어 있으면 true, 그렇지 않으면 false를 반환합니다. 연결 상태가 변경되면 state를 업데이트합니다.
state가 업데이트되는 즉시 컴포넌트 트리의 context도 함께 변경됩니다. 따라서 모든 컴포넌트가 최신 isConnected 값에 접근할 수 있습니다. Redux와 비슷하지만, 보일러플레이트 코드는 훨씬 적습니다.
2. Context Provider로 감싸기
React의 Context API가 동작하려면, 방금 만든 <NetworkProvider> 컴포넌트로 다른 컴포넌트들을 감싸야 합니다:
이렇게 하면 <NetworkProvider> 내부의 모든 컴포넌트에서 해당 context를 사용할 수 있게 됩니다.
3. 컴포넌트에서 Context 사용하기
마지막 단계는 실제 컴포넌트에서 context를 사용하는 것입니다. 우선 <ExampleComponent>로 확인해 보겠습니다:
이제 이 컴포넌트는 Context API를 사용하며, this.context.isConnected 값에 접근할 수 있습니다.
사용자의 인터넷 연결 상태에 따라 온라인 또는 오프라인 메시지를 <ExampleComponent>에서 보여줄 수 있게 되었습니다.
이전 버전의 React에서는 context를 render 메서드 밖에서 사용할 수 없었습니다. 하지만 React 16.6.0부터는 위 예시처럼 static contextType을 통해 어디서든 접근할 수 있습니다. 이렇게 사용하면 컴포넌트 내부 어디에서든 context를 훨씬 유연하게 활용할 수 있습니다.
마무리하며
이 use case에서 Context API가 전역 값을 설정하고 사용하는 데 완벽하다는 것을 확인했습니다. 연결 상태는 앱 전체에서 접근 가능해야 하는 정보이므로, 인터넷 연결이 필요한 작업이 실패할 상황을 미리 사용자에게 알려줄 수 있습니다.
Redux로도 같은 기능을 구현할 수 있지만, 훨씬 많은 코드가 필요합니다. 의존성을 줄이기 위해서라도 가능한 한 React의 네이티브 API를 활용하는 것이 좋습니다!
전체 코드 Gist는 GitHub에서 확인하실 수 있습니다.
읽어주셔서 감사합니다!
저는 몇 년간 Medium을 이용해 왔지만, 주로 다른 사람들의 글을 읽고 배우는 입장이었습니다. 이런 튜토리얼들이 지난 몇 년간 저에게 큰 도움이 되었기에, 직접 글을 쓰는 것이 이 멋진 개발자 커뮤니티에 보답하는 방법이라고 생각합니다!
이 튜토리얼이 도움이 되셨나요? 댓글로 알려주세요 ?
글을 개선할 수 있는 피드백이 있다면 언제든 환영합니다. 더 많은 지식을 나누기 위해 노력하겠습니다.