React vs React Native

안녕하십니까

저는 네이버에서 두부랩의 리액트 네이트브 강좌를 청취하고 이제 리액트 네이티브를 시작하려는 박상빈입니다.
답답한 마음에 이렇게 무작정 질문을 드립니다.

네이버에서 진행하신 리액트 네이트브 강좌 청취 후 문의 사항으로
React (리액트 앱 개발)된 내용을 React Native로 변경 사용 여부가 가능한지 문의 드립니다.(강좌 마지막 유사 질문 발생)

React -> React Native

개인 검색 결과로는

서로 다른 내용으로 재사용이 불가능 하다는 글과 

간단한 변경을 통하여 재사용이 쉽게 가능하다는 글을 모두 읽었습니다. 

가능 여부를 문의 드립니다.

읽어 주셔서 감사합니다.

감사합니다.

한줄 답변: UI는 바로 쓰기 힘들어요. 로직은 가능합니다.

UI는 바로 쓰기 힘든게 RN에서는 <View>인게 React 에서는 <div> 로 대응될 수 있는데 RN에서는 <div>를 못 알아 먹죠. 그래서 웹용 컴포넌트를 앱에서 바로 쓸 수없고 div를 view로 다 바꿔서 쓰게 만들 수는 있습니다. 그래서 불가능하다고 하지 않고 변환 과정이 필요하다고 볼 수 있겠네요. 이를 극복하려는 시도가 UI framework들이 있어요. antd 나 material ui 같은 것들이죠. 이들은 web과 네이티브가 큰 수정 없이 바로 쓸 수 있는 공통 모듈을 만들어 놓고 있어서 큰 변화 없이 쉽게 웹과 네이티브 소스를 공유할 수 있게 됩니다.

비즈니스 로직은 React 나 RN모두 javascript로 코딩하니 공유할 수 있고, redux같은 스테이트 관리 개념도 공통적으로 쓰는 거라 같이 적용할 수 있습니다.

1 Like

기본적인 지식이 부족하여 두서없는 질문에 답변을 해주셔서 진심으로 감사 드립니다.

질문 드린 이유는,
팀에서 확인 사항으로 기존의 React (웹 페이지)를 React Native를 사용하여 빠르게 안드로이드 앱으로(우분투에서 확인할 수 있는) 구현을 해보라는 이야기로 시작 되었습니다.
따라서 팀장님에게 React Native를 이용하여 기존 component 등을 손쉽게 재사용 가능한지 여부를 이야기하고 구현을 해야 해서 문의 드렸었습니다.

그렇다면 바로 쓰기 힘들다면 React를 단순 감싸는 수준(단순 변경)으로 React Native를 이용하여 안드로이드 앱 재작이 어렵다고 말씀 드려도 될까요?

(해당 내용을 지시한분도 React Native에 대한 깊은 지식이 없어 저에게 잘못된 방향을 제시하여 해당 내용을 수행해보라고 이야기 한 것인지 의문이 있습니다. )

리액트로 이미 완성되어 있는 앱이라면 리액트 네이티브로 바꾸시는것보다 PWA로 만드시는게 제일 빠른 Transition입니다.

장점: 앱처럼 아이콘을 만들 수 있다, 앱하고 동등한 정도로 빠르다
단점: 앱스토어에 등록하는 형태가 아니라서 스토어가 제공하는 각종 통계치, VOC가 어렵다

1 Like

답변 진심으로 감사 드립니다. PWA에 대하여 확인하도록 하겠습니다.

하지만 문제는
지시 사항 : React -> RN 로 변경 (RN이 React 앱을 변경해주는 역할을 수행하는 것으로 인지하고 있음)
문의 사항 : 해당 지시 사항을 그대로 수행 가능 여부(React -> RN)
불가능하다면 해당 내용을 이해 가능하도록 설명해야 합니다.

저는 React의 UI나 component 등을 재사용하기 힘들며, 해당 React를 RN로 변경하기 위해서는 많은 수정 또는 어려움이 많이 있는 것으로 이해를 하였습니다.

제가 잘못 이해를하고 있는지, 아니면 지시 사항이 잘 못 되었는지 답변 부탁 드립니다.

이런것을 참고해 보시면 좋을것 같습니다. https://stackoverflow.com/questions/35463547/what-is-the-quickest-way-to-convert-a-react-app-to-react-native

처음에 환경을 바꿔줘야 되고 이것저것 세팅을 해줘야 되서 바로는 힘들지만 완전히 새로써야 되는 것은 아닙니다.

1 Like

이 부분이 뭘 의미하는 지 모호하네요. 우분투에서 쓸 수 있는 앱이라면 안드로이드 앱은 아니지 않나요?

RN (안드로이드 앱)이 목표이며 리눅스 환경에서 해당 내용을 확인 할 수 있도록 하라고 전달 받았습니다.

환경 - 리눅스(우분투 18.04) - 맥 노트북 없음
앱 - RN

빠르게 - 기존에 구현한 React Web 코드를 재사용

이상입니다.

결론을 말씀드리자면 쓰여있는 리액트 앱의 복잡도도 관련이 있지만, 리액트 네이티브나 리액트의 구조를 잘 모르는 분은 빠르게 바꾸긴 힘들 것이고 잘 아시는 분은 빠르게 가능할 수 있을것 같습니다. 그리고 맥이 없어서 우분투를 쓰신다면 expo를 사용하면 되는데 디펜던시 관리가 좀 까다롭습니다. 이것도 expo를 잘 아시는 분은 빠르게 될 것이나…(이하동문)

불가능합니다.

리액트는 애초에 크로스플랫폼 타겟이 아니라 프레젠테이션 로직을 다루는 방법론으로써 대두된 것이고,

리액트 네이티브의 철학도 Learn once, write everywhere 이지, 모든 React 컴포넌트를 알아서 네이티브 타겟으로 빌드해주는 역할이 아닙니다.

React Component API 만 동일하고, 그 외 프레젠테이션 로직이 대부분 상이하여 (react-dom vs react-native) 생각하시는 종류의 "간단한 코드 변경"으로 프로젝트를 이전하는 것은 그냥 불가능하다고 이해하시는게 빠릅니다.

설득이 필요한 상황이라면 React 라이브러리가 제공해주는 것과 그렇지 않은 것, 렌더 타겟인 React DOM vs React Native의 차이점을 위주로 설명해보세요.

@send2park 바쁜 시기에 문의를 주셔서 제대로 못봤네요. 죄송합니다. 윗분들이 잘 말씀해주셨네요. react에서 쓰는 html css코드를 제외하고는 재활용이 가능합니다.

애초에 개발을 진행하실 때 cross platform (웹까지 포함)으로 하시려면 react-native-web이용하여 ios, android, web을 커버하실 수 있습니다. 비슷하게 구성한 프로젝트가 skype에서 만든 reactxp라는 프로젝트입니다.

expo나 CRNA에서도 구성이 가능합니다. html, css를 꼭 사용해야하는 프로젝트가 있으시면 business logicnpm package를 통해서 재활용하는 방식을 많이 택하곤 하십니다.