[React Native] React만 알고 React Native를 배울때 꼭 알아야할 3가지

 

JavaScript와 TypeScript가 인기 언어로 급부상하면서 자바스크립트 라이브러리들이 다양하게 출시되었고

 

그 중 2021년 현재 왕좌를 차지하고 있는 녀석은 React 이다.

 

그래서 Web에서 React를 많이 쓰고 배워서 모바일 개발을 위해 React Native(이하 RN)을 배우고 싶어하는

 

개발자들이 많을 것으로 생각된다.

 

React Native는 React와 문법이 매우 흡사하다.

 

또한 앱에 대한 전반적인 관리를 expo라는 뛰어난 관리 체계가 대신해줌으로써

 

React를 안다면 RN에 충분히 도전할 수 있다.

 

그래도 React와 RN은 다른 기기에서 구동되기 위해 다르게 만들어진 라이브러리이다.

 

React만 알고 RN에 도전할 때 주의해야할 3가지 사항을 알아두고 도전한다면 더 배움이 수월할 것이다.

 

 

 

1. 웹 컴포넌트들은 앱의 사망을 부른다.

 

 

 

말 그대로이다.

 

RN은 모바일에서 구동되기 위한 앱을 만드는 라이브러리로 웹에서 쓰는 컴포넌트들을 가져다가 쓰면

 

빌드때는 아무런 문제가 없다가 런타임때 앱이 사망하여 꺼지게 된다.

 

 

 

위 코드처럼 RN코드에 html 태그인 <div></div>를 넣어도 빨간 줄이 가지 않는다.

 

 

이렇게 expo의 Run in web browser에서 구동해도 에러가 나지 않는다.

 

당연히 웹 브라우저에서 돌아가는 태그이기 때문이다.

 

하지만 이것을 앱에서 구동하는 순간 

 

 

위와 같은 에러를 마주하게 된다.

 

사실 자신이 조심해서 웹 컴포넌트들을 배제하고 RN 개발을 한다면 나오지 않을 에러지만

 

서드파티를 도입할 때 주의해야 한다.

 

해당 서드파티 라이브러리가 RN만을 위한 것인지, 웹 컴포넌트들을 써서

 

해당 Exception을 일으키지 않을지 잘 따져보고 도입해야 한다.

 

 

 

 

2. 웹개발에 사용되는 API라고 해서 RN에서 모두 사용할 수 있는 것은 아니다.

 

필자는 웹사이트에서 쓰이는 REST 통신 API를 이용하여 앱을 만들고 있었다.

 

Web에서는 https://www.example.com:9090/getUser 라는 API를 통해 통신하고 있었고 문제가 없었다.

 

하지만 RN에서 호출하면 계속해서 Network Error가 발생하였다.

 

해당 API 서버는 노드서버에 ssl 인증서를 포함해서 https 통신으로 전송되고 있던 API였다.

 

이를 해결하기 위해 웹서버인 아파치에 proxy를 걸어서 노드 서버로 리다이렉트 되도록하여 해결했다.

 

이 역시 expo의 Run in web browser에서 구동해도 나오지 않는 에러이다.

 

RN을 개발할 때는 에뮬레이터나 실제 모바일 기기로 개발 결과를 보면서 개발하는것이 필수적이다.

 

 

 

 

 

 

3. 네이게이션 설계를 거의 완벽하게 하고 개발에 도입하는 것이 좋다.

 

RN에서 제일 많이 쓰이는 네이게이션을 위한 서드파티는 react navigation이다.

 

[React Native] ② Navigation 설정 및 프로젝트 구조 잡기

 

이것을 설정할때 미리 앱에 사용될 화면을 설계하고 그 화면이 어떤 navigation을 가질지

 

예상한 다음 개발을 시작하는 것이 좋다.

 

아니면 나중에 개발을 진행하다가 프로젝트 구조를 다시 뜯어고쳐야하는 경우가 많이 생긴다.

 

 

 

예를 들어 앱의 메인화면에는 Tab 네비게이션과 drawer 네비게이션이 혼재하면서

 

상세화면은 stack만 나오는 화면일 경우 메인화면, 상세화면을 stack으로 먼저 적용하고

 

tab, drawer를 적용하려면 매우 힘들어 진다.

 

일단 drawer를 먼저 적용하고 그 안에 메인 네비게이션 컴포넌트를 stack으로 짜고

 

다시 그 위에 tab 네비게이션을 적용하는게 베스트이다. 

 

자세한 내용은 아래 공식 문서에서 확인할 수 있다.

 

 

 

Nesting navigators | React Navigation