이제 react-native를 배워야하는 사람들에게

요새 react-native를 배우는 사람들이 눈에 조금씩 들어옵니다. (내가 배우고 있어서 그른가 👀)

 

아마 회사에서 모바일앱을 계획하고 있는데 앱 개발자 리소스가 부족하거나 웹 개발자로 웹프로젝트와 IOS/안드로이드 모바일 환경 대응 을  할 수 있기 때문에 기술스택의 이유로 쓰이는 것 같습니다.

 

flutter도 각광받지만, 웹 개발자는 보통 react를 알고 있기 때문에 아무대로 react-native를 배우는 것이 러닝커브가 상대적으로 낮을 것입니다.

 

이 글에서는 이제 react-native를 배워야하는 사람들이 미리 알아두면 좋은 내용을 간단하게 정리해보고자 합니다.

결국 누군가의 삽질은 누군가에게 큰 도움이 될것이라고 믿기(?) 때문이지요.

 

 

1. 처음엔 책을 구매하는 것을 추천드립니다.

사실 가장 많이 봐야할 것은 공식문서입니다.

특히 초기 환경셋팅 과정은 공식문서의 말을 잘 따라야합니다.

=> 그럼에도 불구하고 저같은 경우는 영어로 되어있어서 몇가지를 놓치는 경우가 있었습니다.

책을 구매하면 한국어로 자세한 설명과 환경설정을 하면서 주의해야하는 점들도 알려주기 때문에 ios, android 환경을 쉽게 셋팅하여 삽질을 최소화할 수 있습니다.

=> 방향성

RN을 처음배울때에는 분명히 react 임에도 상당히 낯설것입니다.

기본적인 컴포넌트들의 특징과 스타일, 실행, 각종 API 등이 낯선데 책은 자주 쓰이는 유용한 것들을 위주로 예제코드를 작성하고 설명하기 때문에 쓸데없는 yak shaving을 줄여줍니다.

 

PPL은 아니고 개인적으로 가장 경험이 좋았던 책은 velopert님의 react-native 책이었습니다.

가장 눈높이에 맞고 + 상세하게 설명되어있었던것 같습니다.

 

 

2. IOS 시뮬레이터는 Cmd+D 버튼으로 디버깅모드를 켤 수 있습니다.

RN으로 처음개발할때 불편한 것중에 하나가, element inspector는 어떻게? network traffic은 어떻게 보지?? 입니다.

IOS 시뮬레이터 같은경우 Cmd+D 단축키를 눌러서 디버그 모드를 활성화하고 react-native debugger를 킨다면 redux dev tool은 물론 element inspector, network debug(우클릭으로 활성화) 를 사용할 수 있습니다.

 

 

3. 대부분의 라이브러리는 오픈소스 라이브러리입니다.

RN은 초기에는 스스로 컴포넌트를 제작했지만, 버전업을 하면서 유지보수가 힘들었는지 상당한 컴포넌트들을 외부 오픈소스를 사용하도록 변경했습니다.

대표적인 것으로 RN에서 localStorage라고 할 수 있는 AsyncStorage입니다.

기본적으로 제공하는 AsyncStorage도 있지만 deprecated되었고 오픈소스를 설치하여 사용해야합니다.

 

그래서 프로젝트 규모가 커지면, 서드 파티 라이브러리들을 많이 사용하게됩니다.

직접구현하고자해도 native코드와 연관되어있다면 우리가 native 언어를 배워서 개발하는건 상당한 리소스 낭비이므로 (언제 swift배워)

해당 서드 파티 라이브러리가 신뢰성있는지 + 버그가 없는지 검증하는 통찰력도 필요해지는것 같습니다.

썼는데 버그가있거나 갑자기 유지보수를 중단해버리면 다른 서드파티 라이브러리를 찾아서 리팩터링해야... 어우 

 

4. CSS가 어딘가 이상합니다.

스타일을 하기위해서 css문법을 사용하실텐데, 사용하면 할수록 뭔가 이상함을 느낄것입니다.

- flexDirection 기본값이 Column입니다.

- display는 none/flex 밖에 없습니다.

- position: flxed가 없습니다.

- box-sizing이 없어서 border-box 사용못하고, 결국에 width: "100%"에 양쪽에 margin을 주면 튀어나갑니다. (margin이 width에 포함이 안됨)

- 기본단위가 px, rem, em이런거 아니고 dp입니다.

- border속성을 주려면 borderWidth, borderStyle, borderColor등으로 나누어서 속성을 부여해줘야합니다. (한줄에 안됨)

- android, ios별로 shadow 스타일을 주는 방법이 다릅니다.

- width: "fit-content"이런거 없습니다.

- borderRadius: "50%"이 안되어서 원을 만드려면 다른 방법이 필요합니다.

- 가상선택자가 없습니다. ::before, :first-child, &+& 이런거 안됩니다.

- background대신에 backgroundColor를 사용해야합니다.

 

이 외에도 웹 css에서 되던게 안되는게 굉장히 많습니다. (외부라이브러리로 해결해야하는 경우도 있음)

 

하지만 여러분이 css 기본기가 충분하다면 충분히 감당가능하실것 같습니다. 😉

 

 

5. 기본제공 컴포넌트

공식문서와 책에서도 충분히 배울 수 있는 부분입니다.

자주 쓰이는 컴포넌트를 몇가지 써보자면

- View

- Text

- Image

- TextInput

- Button

- KeyboardAvoidingView

- TouchableOpacity

- Pressable

- Modal

- FlatList

- ScrollView

- Animated.~

가 있곘습니다.

 

각 컴포넌트별로 용도가 있으며, 웹에서 처럼 시맨틱태그..는 없습니다.

그리고 Button같은 경우는 배경색이 적용이 되지 않기 때문에.. 유연한 Button을 만들기 위해서는 TouchableOpacity같은걸로 View를 감싸서 구현해야할 수도 있습니다.

 

그리고 문자열을 무조건 Text로 감싸야합니다!

 

6. import React from "react"가 필수입니다.

여러분도 react 17부터 React를 import할 필요가 없다는것을 알고 계실것입니다.

하지만 React-Native는 react 17을 사용하고 있다해도 React import해야 jsx문법을 사용할 수 있습니다.

즉, jsx 문법이 있는 곳에는 React가 import되어있어야합니다.

 

 

7. Android와 IOS 차이가 나는 부분이 있습니다.

StatusBar라던지, 스타일이라던지 UI라던지.. 에서 OS별로 동작 차이가 날 수 있습니다.

*.ios.ts, *.android.ts 등으로 파일확장자로 분리할수도 있고, Platform.OS변수를 활용해서 동일파일 내에서 로직을 분기할수도 있습니다.

 

 

8. 외부라이브러리 설치시 IOS는 pod install을 해줘야합니다.

외부라이브러리가 native 코드를 건들수도 있기 때문에, 빌드만 다시해서는 안되고 ios폴더에서 pod install 명령어를 실행시켜주어야 합니다.

안드로이드의 경우 별도로 해줄 필요는 없고, 문제가 있다면 wgradle clean 명령어를 통해 지워주시면 됩니다.

 

 

9. 빌드 캐시를 지워줘야합니다.

프로젝트가 CRNA라면 기본적으로 metro로 로컬 빌드서버가 돌아갈텐데, 

이때 캐시가 남아있으면 동작이 이상할수도있습니다.

캐시가 원인이라고 판단된다면, 아래 명령어를 수행해보세요.

 

watchman watch-del-all

react-native start --reset-cache

 

 

10. 맥북이 M1이라면 Rosetta를 설정해야할 필요도 있습니다.

인텔 맥북에서는 괜찮다가 M1 맥북으로 개발하실때 터미널이나 vs code, xcode를 로제타로 실행시키면 정상작동하는 경우가 있습니다.

바로 설정하실 필요는 없고 M1 관련 이슈가 터졌을때 시도해보셔도 늦지 않습니다. :)

 

 

11. react-native는 javascript가 native코드로 바뀌는게 아닙니다.

RN을 사용해 만든 프로젝트에 JavascriptCore라는 엔진이 탑재되어서, 우리가 작성한 js를 앱내에서 실행시켜주고,

인터페이스들을 "브릿지"를 통해서 네이티브 인터페이스들을 호출하는 것입니다.

 

 

 

아직 저도 RN을 배우고 있고 마주해야할 도전과제가 많지만

뭔가 몇주전의 저를 만난다면 위 사항들을 알려주고 싶어서 이렇게 글을 쓰게 되었습니다.

 

개인적으로 불편한점들도 있지만 그 만큼 해결했을때 즐겁고 크로스플랫폼앱을 서비스한다는 새로운 경험을 할 수 있을것같아서 기대가됩니다.

앞으로 트러블 슈팅을 하면서 생기는 팁들을 꾸준히 업데이트 해보겠습니다. 🙏🙏