프론트엔드 개발자로 입사 후 React Native(이하 RN)를 이용한 프로젝트 앱을 약 2개월간 진행하게 되었는데요
이 RN은 나에게 천국과 지옥을 선물했습니다. 어느새 애증의 관계가 되어버린 RN에 대해 저와 같은 시행착오를 덜 겪으셨으면 하는 바람에서 이 글을 작성하게 되었습니다. 웹 환경에만 익숙했던 제가 RN을 사용하게 되었을 때의 생각을 반영하고 있기 때문에 제 생각이 편향적일 수도 있지만, 저와 비슷한 상황이시라면 분명 도움이 되실 거라 생각합니다.
React Native, 여러 장점이 있는 정말 좋은 기술이라고 생각합니다. 하지만 제가 필요한 부분에선 확실히 알고 작업을 시작한 것이 아니었기 때문에 지옥을 맛보기도 했는데요, 그 경험에 대한 글을 아래에 적어봤습니다.
그럼 일단 제가 작업하면서 느낀 RN 장단점에 대해 정리해보고 시작할게요!
RN 장단점 정리
RN 장점
웹 기술인 CSS(정확히 말하면 css와 비슷한 styles), JS로 앱 제작이 가능하기 때문에, 웹 개발자가 제작하기에 러닝 커브가 낮다.
android, ios 두 개의 앱 환경을 이 RN 소스 하나로 관리 및 배포가 가능하기 때문에, 이 부분에서 오는 빠른 유지보수와 비용절감 등의 효과를 볼 수 있다.
RN은 핫 로딩을 지원하기 때문에 내가 작업한 화면을 즉시 확인할 수 있다.
만약 타입 스크립트를 추가로 사용하게 된다면 type에 대한 에러를 사전에 막을 수 있기 때문에 개발 속도가 더욱 빨라진다.
웹과 앱 지식을 골고루 갖춘 개발자라면 작업하기에 금상첨화!
RN 단점
앱의 네이티브 기능을 사용하려면 결국 android, ios 개발 지식도 있어야 한다.
앱에 대한 지식이 없다면 RN만으로는 앱 개발자라고 자신 있게 말할 수 없다는 함정!
네이티브 앱이지만 실제 andorid, ios와 관련된 언어로 만든 네이티브 앱보단 성능이 좋지 않다. (라고 하더라고요, 사실 제가 작업한 프로젝트는 덩치가 크지 않아 체감하진 못했습니다.)
"웹 기술로 앱을 만든다고?"의 잠재적 오류
html이 아니다. RN용 태그
css인 듯 css 아닌 css 같은 너
자바스크립트 맞고, 리액트도 맞다. 하지만 앱이다.
그러면 나 이제 앱 개발자라고도 할 수 있는 거야?
앱? 만들 순 있어, 하지만..
결국엔 android, ios에서의 언어도 알아야 한다.
"웹 기술로 앱을 만든다고?"의 잠재적 오류
html이 아니다. RN용 태그
RN은 html까지 제공하진 않습니다. 그래서 RN에서 제공하는 태그를 확인해서 구조를 짜게 됩니다. html과 비슷하지만 엄연히 모두 다르고, 작업 초기엔 RN공식문서에 들어가 계속 확인하면서 작업해야 합니다. 하지만 이 작업이 어렵진 않습니다. 각 태그가 어떤 역할을 하는지 몇 번 사용하다 보면 금방 적응이 되고, 직관적인 이름이란 걸 아실 테니까요 :) 하지만 공식문서를 잘 보고 작업하지 않으면 헤매기 쉽습니다. 아래는 웹과 다른 점 때문에 제가 겪었던 시행착오입니다.
html의 div 격인 View태그를 만든 후, 그 안에 글자를 넣었는데 오류가 납니다. 공식문서를 봤더니 RN에서는 안에 글자를 넣으려면 반드시 <Text> 태그로 감싸줘야 한다는 내용이 있었습니다.
단순히 <View> 태그 안에 작업을 시작하면 될 줄 알았는데, 또 오류가 납니다. 알고 보니 최상단엔 꼭 <SafeAreaView> 태그로 감싸줘야 오류가 나지 않고 디바이스에 안정적?이라는 내용이었습니다.
selectbox나 input의 radio, checkbox가 없습니다. 이외에도 생각보다 제공되지 않는 기능이 많은데요, 그 이유는 RN의 성능 및 용량 때문에 정말 필요한 기능을 제외하곤 대부분 분리시켜놓았기 때문입니다. 그래서 이 분리된 기능들을 npm사이트에 들어가 직접 찾아 원하는 태그를 설치해 사용하는 것을 권고사항으로 공식문서에 기록되어 있습니다.
css인 듯 css 아닌 css 같은 너
RN은 css와 거의 똑같은 스타일링을 제공합니다. 그렇기 때문에 기존에 css로 스타일링을 해본 분이라면 낮은 러닝 커브로 빠르게 작업에 익숙해질 겁니다. 하지만 '비슷하다'에 초점을 두시고 작업하셔야 합니다. 엄연히 웹 css와 상황이 다르다는 겁니다.
그럼 그 다른 부분이 어떤 부분인지 제가 겪은 부분에 대해서 얘기해볼게요!
1. 최소한의 css만을 제공
RN은 최소한의 css만을 제공합니다. 웹 작업하듯 작업하다 보면 없는 css가 꽤 있습니다. 예를 들면, display의 속성은 block, inline, inline-block, table, flex, table-cell 등등이 있죠. 하지만 RN은 flex, none 두 가지가 끝입니다. 웹과는 다르게 아예 삭제된 css도 있으니, 확인하시고 작업에 도움이 되시길 바랍니다. 아래는 인터넷에서 찾은 styles파일이고, 제가 작업하면서 살을 덧붙였습니다. 웹 css와는 다르게 아예 없는 css도 있으니, 확인하시고 작업에 도움이 되시길 바랍니다.
앞서 말했듯 display 엔 flex와 none만이 존재합니다. 그렇기 때문에 정렬은 flex로 작업을 하셔야 하는데, 여기서 웹의 flex와는 다른 점이 있습니다. 그것은 바로 display:flex라고 명시하지 않아도 justifyContent와 alignItems가 먹힌다는 사실입니다. 그리고 또 한 가지는 flexDirection:row를 지정해주지 않으면 column 방향이 default로 정해집니다.
3. 내 마음대로 되지 않는 box-shadow
box-shadow를 주는 것? 가능합니다. 하지만 디테일한 조정의 폭이 웹보다 훨씬 작습니다. 그래서 넓게 퍼져있는 그림자 효과를 주고 싶다면 npm사이트에 있는 shadow-rn이라는 녀석을 설치해서 사용하셔야 원하는 대로 그림자를 조정하실 수 있습니다.
자바스크립트 맞고, 리액트도 맞다. 하지만 앱이다.
자바스크립트와 리액트로 프로그래밍을 하는 것이기 때문에 작업 속도가 빠를 것이라고 생각했고 (물론 실제로 빨랐습니다만..) 금방 끝나겠지라고 생각했습니다. 하지만 앱 환경이기 때문에 일어나는 문제와 RN고유의 에러에 대해서 나타나는 오류를 잡느라 프로그래밍한 시간만큼 에러를 잡는데 시간을 쏟았습니다ㅜㅜ 앱을 전혀 모르는 저로써는 아시는 분보다 시간이 두배 이상으로 걸리지 않았나 싶네요. 그중 몇 가지 구체적인 상황을 풀어보고자 합니다.
1. 자주 나타나는 가상 시뮬레이터 실행오류
처음 RN을 실행할 때 터미널에 적는 코드는 아래와 같습니다. npm을 켜고, android를 실행시켜 가상 시뮬레이터나 usb로 연결된 실제 폰에서 작업화면을 보게 되죠.
npm start
npm run android
하지만 알 수 없는 오류를 화면에 종종 뱉어냅니다. 어제 성공한 소스를 변경하지 않고 그대로 실행만 시켰는데 말이죠. 그래서 검색하다가 찾아낸 결과는, '빌드할 때 캐시가 남아있어 충돌? 이 날 수 있으므로, 실행시킬 때 캐시를 삭제하는 구문을 포함해라'는 내용이었습니다. 그래서 실행시켜줄 때 항상 아래와 같이 작성했습니다.
npm start --reset-cashe
이 부분은 expo를 사용하게 되면 나타나지 않는 오류라곤 하던데.. 직접 해보진 않았기 때문에 정확하진 않습니다. 참고만 해주세요.
2. 생각보다 긴 앱 실행시간
웹은 npm start 하면 브라우저가 뜨고 프로그래밍 환경이 조성되지만, RN은 환경을 세팅하고 프로그래밍을 시작하려면, 사전단계가 몇 가지 더 있습니다.
안드로이드 스튜디오를 켠다.
AVD 시뮬레이터를 켠다.
npm start, npm run android
초기엔 1분 안에 금방 실행되어 큰 문제가 되지 않습니다. 하지만 시간이 지나고 프로젝트의 덩치가 커질수록 실행 지연속도는 점점 늘어납니다. (너무 당연한 얘긴가요...)
그리고 리액트는 작업을 하다 보면 자주 구조를 컴포넌트화 시키게 되는데, 이 컴포넌트화 시킨 녀석을 import 하게 되면 RN이 인식을 못하기 때문에 다시 npm start, npm run android를 해줘야 합니다. 이는 npm사이트에서 새로운 기능을 설치해 import 할 때도 마찬가지입니다.
제가 사내에서 작업하던 프로젝트는 페이지 분량이 10페이지 정도로 다른 사내 프로젝트에 비해 덩치가 적은 프로젝트인데도 다시 실행시키게 되면 시간이 어느덧 2~5분 지나있습니다. 큰 문제가 아닌 것 같아보지만 리액트 특성상 잦은 컴포넌트화나 npm설치가 이루어질 수밖에 없는데, 중간에 이런 식으로 흐름이 끊기게 되면 어느덧 한 시간이 그냥 지나가는 건 당연시돼버립니다..
그리고 알 수 없는 가상 시뮬레이터 오류가 종종 나타나 다시 실행시키는 경우도 잦았기 때문에, 여로모로 작업 중 흐름이 끊기는 현상이 있었습니다.
그러면 나 이제 앱 개발자라고도 할 수 있는 거야?
앱? 만들 순 있다, 하지만..
RN으로 서비스를 처음부터 끝까지 만들어봤습니다. 이제 전 앱 하나를 빠르게 뚝딱 만드는 것이 가능해졌습니다. 보통 어떤 기술을 이용해 프로젝트를 완성하면 다음엔 더 잘할 수 있을 것이라는 자신감이 생기는 것이 일반적입니다. 하지만 RN은 완성을 하고 나니 더욱 불안감이 커집니다. 이 상태로 1년이 지나도 저는 '앱 개발자'라고 자신 있게 말할 수 없을 것 같습니다. 그 이유는 결국 RN에 없는 다른 기능을 앱에서 사용하려면, 결국 android와 ios 네이티브 소스를 만질 줄 알아야 하기 때문입니다. 사내에 다른 android개발자나 ios개발자가 있으면 물어보면 도움이 되겠지만 아시다시피 마냥 물어보는 것도 한계가 있으니까요.
결국엔 android, ios에서의 언어도 알아야 한다.
원래 앱에 대한 지식이 있으신 분이라면 유리하겠지만, 저처럼 웹만 바라보고 있던 사람은 java, objective-c을 따로 공부를 해서 네이티브 앱에 대한 지식을 쌓아야 네이티브 모듈을 이용해 추가적인 기능을 붙일 수 있습니다. 하지만 웹을 주목적으로 하는 저에겐 부담스러운 일이 아닐 수가 없습니다. 당장 다른 해야 할 개발 공부도 많으니까요ㅜㅜ 결국은 자신이 어떤 길을 갈지, 또 어떤 공부를 할지에 따라 갈리는 선택의 문제라고 생각합니다.
"간단한 서비스가 있는 프로젝트나, 개인 앱을 만들기엔 RN이 좋다, 하지만 사내에서 규모가 있거나 지속적으로 업그레이드되어야 할 프로젝트에는 android, ios의 지식이 있거나, 앱 개발자가 옆에 있어야 한다."
제가 내린 개인적인 결론은 위와 같습니다! 제 주관적인 견해이니,
혹시나 다른 의견이 있으시다면 댓글로 남겨주시면 남겨주시면 감사하겠습니다.
마지막으로 제가 앱을 만들면서 도움을 많이 받았던 RN 관련 자료 링크를 아래에 첨부합니다.
