React Native로 8개월 넘게 프로젝트를 통해 사용해본 회고랄까..?

이 회고는 프로젝트 회고가 아닌 그 전까진 React를 사용하다가 처음 React Native를 프로젝트로 사용하면서 개인적으로 느꼈던 점들을 작성한 글입니다.

해당 플젝 회고는 요기👇🏻

https://minjoo-space.tistory.com/106

 

일단 이 플젝 전까지는 React + Javascript로 계속해서 작업을 해왔다.

이 플젝은 React Native + Typescript를 사용해야만 했다.

그 과정에서 처음 사용해보는 언어와 프레임워크를 만나면서 격동기를 겪고,,

물론 프레임워크뿐만 아니라, 사용한 언어 자체도 다르기때문에 프레임워크만의 느낀 점은 아닐 수 있지만 일단 리액트를 사용하다가 리액트 네이티브를 사용하면서 느낀 점들을 기록해보려고 한다.

 

일단 React Native는 내 주위에서도 React붐이 일어나던 시기에 많은 사람들이 리액트를 학습했고, 그러면서 React Native까지도 학습하는 사람들이 많았었다.

지금도 크로스플랫폼으로 리액트네이티브를 빼놓을 수 없긴 해서 많이들 사용을 하고 있지만 

프로젝트를 빨리 구현해야했기에 깊이 있게 리액트 네이티브를 사용하지는 못했을 수 있지만, 그렇지만 창업을 생각한 서비스였기에 빠르게 많은 기능을 구현했다보니 그 면에서 구현 효율성에 있어서는 더 할 수 있는 얘기가 많을 거라고 생각된다.

그치만 그냥 얜 그랬나보다~하고 가벼운 마음으로 읽어주면 좋을것같다~~

 

React와 비슷하다?!🤔

React를 학습하다 React Native까지 학습하는 사람이 많은 이유는 비슷하기 때문이라고 생각된다.

과연 비슷할까?

구조

제일 동일하다고 느낀 부분이었다.

 

vscode로 Typescript Template을 열었을때의 파일구조이다.

React를 사용했을때와 유사하지만,

네이티브 구동을 위한 android, ios 파일이 있다는 게 다른 점이다.

폴더 구조도 유사하기에 컴포넌트 구조도 유사하다.

그렇기에 컴포넌트를 구현하는 데 있어도 리액트를 사용해봤다면 무리가 없을 것이다.

 

하지만, 여기에 차이가 있다.

import {AppRegistry} from 'react-native';

import App from './App';

import { name as appName } from './app.json';

AppRegistry.registerComponent(appName, () => App);

 

위에 보이는 것처럼 React Native는 React는 React DOM을 이용해 출력하는 것과 다르게 AppRegistry를 사용해서 화면을 출력한다.

이게 내가 제일 처음 파일들을 구경하다 발견한 점이었다.

 

이로써 리액트를 사용하다가 리액트네이티브를 사용해보니 다른 프레임워크보다 빨리 습득하고 사용할 수 있었다. 이로써 낮은 러닝커브라고 말하는 이유를 어느정도 납득할 수 있었다.

 

스타일링

프로젝트에 투입되면서 제일 당황스러웠던 게 바로 컴포넌트 스타일링이었다.

리액트 네이티브는 StyleSheet라는 스타일링을 사용했다. 

형태는 스타일드 컴포넌트와 유사하지만, 역할은 css 클래스와 유사하다고 느꼈다.

아래는 프로젝트 사용됐던 스타일링 코드 일부이다.

const styles = StyleSheet.create({
  headerContainter: {
    flexDirection: 'row',
    alignItems: 'center',
    height:52,
    paddingLeft: 24,
    paddingRight: 24,
    marginBottom: 8,
  },
  notificationBox: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent:'space-between',
    backgroundColor: '#101011',
    marginBottom: 20, 
  },
  notificationTextBox: {
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    width: '100%',
    backgroundColor: '#101011'
  }
});

 

뭔가 익숙한듯 살짝 다른,, 그런 느낌

일단 제일 어색하고 불편했던 것 중 하나는 padding, margin이런 상하좌우에 대한 속성을 줄 수 있는 것들이 위치마다 각각 따로 설정을 작성해줘야 된다는 점이었다.

css에서는 

padding: 24 20 15 20 

이렇게 작성해줬던 것들이

stylesheet에서는 

paddingLeft: 20,

paddingTop: 24,

paddingRight: 20,

paddingBottom: 15

이렇게 작성해줘야되는 것이다.

이 과정에서 처음에 엄청 당황했었다.

 

이런 식으로 스타일링에 있어서는 적응해야되는 부분이 꽤나 있다.

하지만, 하다보면 이것도 빠르게 파악해서 적응을 할 수 있기에 큰 고비라고 할 것은 아니다.

 

크로스 플랫폼! 🧐

리액트 네이티브의 장점은 뭐니뭐니해도 크로스 플랫폼과 네이티브와의 호환이다

아니, 하나의 코드로 두개의 플랫폼에서 구현이 가능하다는데! 심지어 네이티브에서 할 수 있는 기능을 구현할 수 있다는데! 이보다 더한 장점이 뭐가 있겠나

 

하지만, 장점이 있으면 단점도 있는 법!

큰 장점을 가지기까지 겪었던 어려웠던 점을 공유해보겠다

 

일단, 크로스 플랫폼!

일단 한 코드로 iOS, 안드로이다 둘 다 배포할 수 있다는 거 너무 좋다!

근데 중간까지만 이게 가능했다..

근데 이 플젝 진행 중에 2주동안 미친듯이 빠르게 모든 기능을 집중 구현하고 마무리했던 기간이 있다. 그 때 빠르게 처리하느라 iOS로만 확인을 하면서 진행을 했더니 다 하고 안드로이드 스튜디오로 빌드해보니 it's 먹통..

정말 먹통...

아마 라이브러리랑 패키지들을 설치하는 과정에서 안드로이드 설정도 다 해줬었는데 이미 너무 먼 길을 온건지.. 어디서 문제가 발생한건지 찾지 못할 지경이었다..

물론 해결하려고 수정하고,, 이것저것 다시 패키지 install하고 했지만.. 너무 오랜 시간을 잡아먹는 탓에 일단 후퇴했다

그 이상으로 되돌리면서 디버깅하기엔 멀쩡히 잘 돌아가고 있는 iOS에 영향이 가기 때문에... 섣불리 할 수 없었다...

 

결론 : 한번에 두개를 구현할 수 있다 == 독립적이지 못하다

내 심정

iOS, 안드로이드 둘 중 하나만 오류가 발생하는 경우가 많았는데 이럴 때 안드 수정하면 아오스 난리나고, 아오스 수정하면 안드 난리나는 경우가 많다..

어떻게 알았냐고요? 저도 알고싶지않았어요..

 

정말 크로스 플랫폼인 만큼 지속적인 크로스 체크가 불가피하다..

 

네이티브스러움?

아직은 네이티브라기보단 정말 '네이티브스러움'과 가깝다고 생각한다.

웹개발만 하던 나는 뭔가 더 모바일의 이벤트 (ex, 바텀시트를 사용한다거나 그런 모바일스러운 제스처)를 구현하고 해보는 거 자체가 너무 신세계였다!

그래서 아 이래서 리액트네이티브 아주 네이티브와 리액트 그 중간에서 요놈? 아주 맛도리여?

 

하.지.만..

네이티브가 네이티브인 데에는 다 이유가 있다는 걸 느꼈다..

정말 무슨 기능 구현하려고하면 쌩 rn으로는 구현하기가 힘들고, 라이브러리를 무.조.건 찾아야한다.

 

이번 플젝에서 이게 가장 대표적이었던 건 갤러리..

사진을 사용하는 데 있어서 처음엔 커스터마이징 앨범을 사용했었고, 커스터마이징 편집기능도 사용했었는데, 너무나 큰 성능이슈로 다 만들어놓은 기능 피봇..

그러고 이제 라이브러리로 돌아왔다.

근데 라이브러리로 돌아오면 커스터마이징은 안되고..

심지어 라이브러리도 몇 개 없다..

네이티브와 호환된다고 하지만, 완전한 네이티브가 아닌 네이티브스러운거기 때문에 라이브러리나 패키지에 대한 의존도가 매우 높다. 근데 많이 없다. (이거 참..)

이건 커스터마이징의 영역이라 그런거 아니냐 라고 한다면 맞다! 그렇다면 다른 예시로,,

 

네이티브의 바텀시트 이런 것들을 다 컴포넌트로 만들어주고, 우리가 모달을 띄우듯이 로직을 구현해줘야한다.

이걸 구현하면서도 이게 맞나? 싶은 것들이 참 많았다.

네이티브에서는 그냥 기본 함수 딱 띄워서 하는 것들이 웹으로 어느정도 노가다라고 표현할 수 있을 정도의 공수가 드는 경우가 많았다.

 

계속되는 pod install..

라이브러리를 설치하고, 만약 같이 협업하는 사람의 코드를 pull하면 무조건 pod install을 해줘야한다.

귀찮다..ㅎㅎ..

---

그 외에도 다 아는 정보의 부족 등의 점들도 많았다.

요즘 심리학을 배우게 되면서 알게 된 건데 나쁜 감정의 일이 기쁜 감정의 일보다 더 임팩트가 크고, 기억에 잘 남는다는 거다.

그래서 그런지 나도 장점보다는 단점을 많이 말했는데 절대 리액트 네이티브가 나쁘다는 게 아니다.

기억에 남는 걸 말하다보니 이렇게 된 것 같다,,

React Native를 알고, 이걸 찾아봤다면 이미 장점은 다 알고있는거다!!!

 

쓰다보니 지쳤다...

정말 애증의 React Native..

좀 더 깊이 있는 얘기를 공유하고 싶지만, 그렇지 못한 것 같아 아쉽다

그래도 rn하면서 재밌었다!

근데 rn아직 안끝났다... rn 쓰면서 좀 더 의식하고 생각하고 쓰면서 또 공유할만한 일들이 있으면 정리해서 또 그때만의 지식으로 작성해볼 수 있었으면 좋겠다ㅏ

아쟈아쟈