너네 무슨 사이야..? React 🆚 React Native

Siwon Yoo·2022년 2월 21일

리액트 리액트 네이티브 앱 웹

챗마인더📝

목록 보기

3/4

🤝🏼웹 개발과 앱 개발

📌서론

먼저, 이 글은 토이 프로젝트로 리액트를 조금 다루어 본 주니어 개발자였던 내가 모바일 어플리케이션 MVP 구현을 위해 앱 개발을 처음으로 하고 느낀 점을 중심으로 쓴 글임을 밝힌다.

혹시 휴대폰 앱은 못만드시나요?

대학교 공모전이나 동아리 등에서 구성된 팀에 개발자로 있다 보면, 기획 회의 단계에서 한번쯤은 꼭 들어볼 법한 질문일 것 같다.
모두가 스마트폰을 들고 다니는 시대인 만큼, 휴대폰 어플리케이션에 대한 접근성이 너무 좋기도 하고, 사실 개발자가 아닌 사람들은 웹과 앱은 치킨과 피자만큼이나 다르다는 것에 대해서 잘 모르는 게 일반적이기 때문에.. 치킨을 만들 줄 아는 사람이라면 피자도 만들 수 있지 않을까 하는 생각에 많이들 저런 질문을 하는 것 같다.

만약 이 글을 읽고 있는 당신이 리액트 네이티브의 존재를 어깨너머로 접한 적이 있고,
"어.. 해보지는 않았는데.. 할 수도..?" 와 같이 우물쭈물 했다면,

앱으로 만들면 너무너무 좋을 것 같아요!

가 일어나기 십상이고, 혹시혹시나 이게 지금 당신이 놓인 상황이라면, 번지수 잘 찾았다.
큰 도움이 되지는 못하더라도, 간접적으로나마 리액트 네이티브에 대한 인상을 얻어 가길 바란다😉

웹과 앱(안드로이드 or IOS 네이티브 앱 기준)을 치킨과 피자에 비유해 간단히 설명하자면
사용하는 재료(언어)도 다르고,
조리법(구조)도 다르고,
파는 식당(동작하는 운영체제)도 다르고,
그냥 거의 다 다르다.

그러나 세상은 넓고 똑똑한 사람은 많기에, 인류는 발전을 거듭할 수 있었고..

떠먹는 치킨, 이미지 출처 KFC

여러분은 내가 무슨 말을 하고 싶은 건지 이미 알고 있을 것이다.

세상에 대단한 게 많다.
웹페이지를 개발하고 앱으로 감싼 후 불러오는 형식의 하이브리드 앱도 있고,
하나의 프레임워크로 여러 운영체제에서(안드로이드, ios, 심지어는 웹까지) 동작할 수 있도록 하는 크로스 플랫폼 앱도 있다.

서론이 길었다. 오늘의 주제는 리액트를 조금 다뤄본 사람이, 리액트 네이티브로 앱을 만들어내면서 느낀 리액트와 리액트 네이티브의 공통점과 차이점에 대해서이다.

📌비슷한 점

큰 틀이 비슷하다.
우선, 리액트로 토이 프로젝트를 좀 해본 적이 있다면, React Native(이하 RN)로 짜인 코드를 보고 이해하는 데에 큰 무리가 없을 것이다. JSX 기반의 틀을 그대로 사용하기 때문에, 약간 다른 태그들만 알고 나면 거의 그대로 쓸 수 있을 것이고, 스타일링 또한 기본적으로 css를 이용한다. Styled-components 또한 리액트 네이티브를 지원하기 때문에, 나는 리액트에서 개발하던 환경과 거의 비슷한 환경에서 개발할 수 있었다. 조건부 렌더링도, useEffect나 useRef같은 hook도, custom hook도 모두 똑같이 쓸 수 있다.
이건 그냥 리액트이다. 보통 div태그를 많이 쓴다. 이건 리액트 네이티브. div 대신 View 태그를 사용하고, 글자를 쓰려면 Text 태그로 감싸야 한다.
리액트 네이티브 홈페이지에 가면, Core components에 대한 설명이 있다. 여기서 RN의 컴포넌트에 대한 설명을 읽을 수 있고, 설명 옆에 예시 코드 또한 있기 때문에, 보고 따라 사용하기 상당히 편하다.

컴포넌트 구조와 상태를 관리하는 방법이 같다.
근본이 같기 때문에, RN도 리액트와 같이 useState를 통해 상태를 관리하고, 컴포넌트 단위로 데이터를 넘겨준다. Redux도 사용할 수 있고, 리액트에서 데이터를 관리하는 패턴이 RN에서도 동일하게 적용된다.

리액트와 리액트 네이티브는 뿌리가 같은 만큼 큰 틀은 동일하나, 다른 운영체제 기반에서 동작하는 탓에 자잘한 차이점이 아주 많은 것 같다. 리액트 경험자 누구나 리액트 네이티브에 도전할 수 있으나, 첫 도전길에서 자바스크립트를 사용하다 타입스크립트를 사용하는 것 같은 구속감(?)을 피하기는 어려울 것 같다.

분명 "엥 이것도 안돼?"를 외치게 될 것,,
개인적으로는 폰트 적용이 마음대로 안될 때 좀 당황했다.
디자인 팀원 측으로부터 한글/영어 폰트를 다르게 해달라는 요청을 받았는데, 웹에서는 css에 있는 unicode range를 사용하면 쉽게 구현할 수 있는 부분을 RN에서는 정말 쉽게 구현할 수 없었다.

📌다른 점

레이아웃 시스템이 다르다.
css의 flexbox를 기준으로 하긴 하지만, default가 가로가 아닌 세로 단위로 box가 쌓이고,
디자인 방식 또한 웹에서 px 기준으로 했던 것이 보통 비율 단위로 많이 구성한다.
휴대폰 디바이스마다 화면 크기가 다르기 때문이다.
원래 안드로이드는 dp, IOS는 pt라는 고유 단위를 사용하나, RN에서는 그냥 px를 써주면 된다.
협업하는 디자이너가 있다면 이 사실을 미리 알려주면 좋을 것 같다.
라이브러리의 소요가 더 크다.
리액트에서는 당연시되는 것들이 RN에서는 안 되는 것들이 생각보다 많다. 그럴 때마다 라이브러리를 사용해야 하기에, 라이브러리를 찾고 적용하는 데 드는 소요가 생각보다 크다. 예를 들자면 디바이스 자체에 String을 저장하는 일종의 쿠키 역할을 하는 Async Storage나, 벡터 이미지를 사용할 수 있게 해주는 RN Svg나, 폰트를 설정할 수 있게 해주는 RN Config같은 라이브러리의 사용은, 웹 브라우저 환경이었다면 필요없었을 것이다.

다행스러운 점은, RN은 사용자 풀이 넓어서 전세계 사람들이 만든 정말 많은 라이브러리들이 있다. 기본적으로 RN과 공식적으로 협업하는 Expo에서 만드는 라이브러리를 사용해도 좋고, React Native Directory라고 해서 사용자들이 만들어 둔 라이브러리가 공식적으로 공유되는 커뮤니티도 있다. 다운로드 수와 신뢰도는 대체적으로 비례하니, 유행의 흐름에 탑승하도록 하자.
빌드/배포하는 방법이 다르다.
동작하는 운영체제가 다르다 보니, 빌드하는 방법이 다르다.
리액트 할 때는 그냥 터미널에다 npm start만 하면 로컬호스트가 열렸는데, RN에서는 이 과정이 꽤나 복잡하다. 로컬에서 디버깅만 하려고 해도 Metro 서버를 열어주어야 하고(물론 자동으로 열리긴 하지만), 가상 기기(에뮬레이터) 혹은 실물 기기와 usb로 연결해야 빌드할 수 있다. 때문에 개발 환경 셋팅의 허들이 높다고 할 수 있다. 안드로이드의 에뮬레이터를 위해서는 Android Studio를, iOS의 에뮬레이터를 위해서는 XCODE 설치가 필수이다. iOS 버전 빌드를 위해서는 맥이 선택 아닌 필수이다.
또 크로스 플랫폼이기에 안드로이드와 IOS 버전 빌드를 따로 해 주어야 하고, 배포용 빌드를 하기 위해서는 해당하는 스토어(Google Play / App store)의 인증 키를 심고 배포를 해 줘야 하는 등 처음 할 때에는 꽤나 복잡하게 느껴지는 과정이 포함된다.
위젯..그리고 푸시 알림과 관련해서
사실 웹 대신 앱을 만들고 싶어하는 가장 큰 이유가 여기에 있을지도 모른다.
결론부터 말하자면, 리액트 네이티브라고 해서 쉽게 위젯/푸시 알림을 구현할 수는 있지는 않다.
영 안되는 것은 아니고, 알아본 바에 따르면 Firebase cloud messaging을 사용한 푸시 알림 그리고, 해당 운영 체제에서 사용하는 언어를 기반으로 위젯 구현이 가능하다고 한다.
그러나 우리는 일정이 촉박했기 때문에 해당 부분은 개발 후순위로 두었고, 아직도 미구현 상태이다.
RN를 통해 자바스크립트 기반의 휴대폰 어플리케이션을 만들 수 있지만, 결국 안드로이드의 자바(혹은 코틀린), IOS의 스위프트(혹은 Objective C)를 알아야만 구현이 가능한 부분도 있다.