React-Native 와 React ..?

리액트 네이티브..? 리액트로 주로 개발하던 개발자로서 걱정반 기대반으로(비슷하단 이야긴 들었지만,, 러닝 커브는 있다는 이야기를 들어서..) 새로운 라이브러리를 공부를 시작하게 되었습니다. 

공부에 들어가기전에, 두개의 차이점을 먼저 찾아보았습니다,.

뭐가 다를까? 

	React	React-Native
정의	프론트엔드 JS라이브러리	리액트 방식으로 네이티브 앱개발할 수 있는 JS라이브러리
동작	Virtual Dom 을 이용하여 변화된 곳을 캐치하여 변화된 Dom으로 변경	Bridge를 이용하여 ios, android 각각의 네이티브 언어에 접근
출력	ReactDom을 사용	AppRegistry 사용
HTML문법	O	X
스타일링		제한적 (너무너무.. 제한적!!!)

흠 아직까지는 큰 감이 안왔습니다.

왜 냐면, React로 하이브리드 앱을 개발할때도 브릿지(RN과 동작은 다를수 있지만)연결해본 경험이 있어 낯선 단어가 아니었고 얼마나 다를까 싶었기 때문입니다.  ( AppRegistry는..일단 넘어가고.. )   

가벼운 마음으로(이라 쓰고 '아무것도 공부하지 않고'라고 읽습니다) RN(React-Native)프로젝트를 실행했을때 몇가지 놀라운 점이 있었습니다.

  첫번째로 놀랐던 점은 실행시키기까지의 과정이었습니다. 애뮬레이터를 실행을 시켜야 한다는 사실은 알고 있었으나 xcode 설정에 그렇게 많은 시간은 쏟을줄은 상상도 하지 못했습니다. m1이슈부터 버전이슈 등등 찾아서 설정해야하는게 한두가지가 아니었습니다. (덕분에 좋은 콘텐츠가 되어 블로그를 하나 더 작성할 수 있었습니다ㅎㅎ)

  두번째로 놀랐던 점은 React 프로젝트에는 존재하는 public > index.html 이 없었다는점이었습니다.
퍼블리셔부터 공부를 시작한 저로써, index.html이 없다...? 는 사실은 것은 왠지 모를 새로운 영역에 접근하는 기분이었습니다. 가장 루트 격인 파일이 없는 것이었으니까요.!

 세번째로 놀랐던 점은. React로 개발할땐 HTML기본 태그로 커스텀하여 하나 하나 컴포넌트들을 만들곤 했는데, RN에는 이미 제공하는 많은 컴포넌트가 있었다는 점입니다. 정말로 있는 컴포넌트를 그대로 잘 조합해서 작업하는 느낌이었어요.

네번째는 어느정도는 알고 있었지만 platform에따라 다르게 작성해줘야하는 코드들이 생각보다 꽤 있었다는것입니다. 간단한 예로 하이브리드앱을 만들때 스타일링같은경우 경우를 나누지 않고 두 플랫폼 모두를 충족시키는 방법으로 변경하는 방식을 사용했었지 두 플랫폼을 구분해서 작업해줄 일은 많지 않았기때문입니다. 

다섯번째는, RN은,, 이 환경에서 어떻게 그렇게 스타일링을 해내지! 였습니다.inspector로 컴포넌트의 스타일링을 찍어봐도 웹에서 지원해주는만큼의 정보를 제공해주지않고, 제가 임의로 조정도 해볼 수 없기에 난이도가 헬이라는걸 느낄 수 있었습니다. 

마지막으로 공부를 조금 하고 놀랐던것은, 생각보다 다운받아야할 라이브러리가 많았다는 것입니다. 예를 들어 두 플랫폼을 모두 만족시키기 위해서라든지, 앱의 특정 기능을 사용하기 위해서라든지요..! 라이브러리보단 하드코딩을 많이 하던 저로써는 '오! 고민하지 말고 일단 받아야하는 것들이 있구나!' 라는 부분들 새로 알게되었습니다.

그래도 다행인 점은, React의 Hooks들을 사용하고 상태 관리, 기능개 발은 크게 차이가 없여 놀란마음을 추스리고 공부를 시작하게되었습니다.