2020: React Native (0.61~0.63) 개발 참조

React Native는 Javascript 언어 기반의 모바일 UI 개발언어다.

굳이 UI 개발언어라고 하는 이유는... 상태 관리나 REST 호출 등 일부 서비스적인 측면의 기능들을 제외하면 코어든 제3사 라이브러리 패키지든 가릴 것 없이 거의 대부분이 UI 표현을 위한 목적으로 만들어진 기능들이기 때문이다.

 

뭐, 이런 잡다구리한 이야기는 각설하고,

React Native로 뭔가를 개발해야겠다고 생각한다면 아래에 나열한 18가지 정도는 알아두는 것이 좋다.

그 중 일부는... 모르고서는 아예 시작하기도 어렵고.

 

그래서 정리해 봤다.

 

 

1. ES2015(ES6):
- https://babeljs.io/docs/en/learn/

Babel · The compiler for next generation JavaScript

ES6, babel7은 기존 Javascript와 많이 달라졌다. 거의 Java나 C#에 버금갈 만큼의 고급(?) 언어가 되었다고 해도 무방할 정도. React Native에서는 이 babel7 언어 기반으로 동작되므로 꼭 알아두어야 한다.

 

 

2. React:
- https://www.w3schools.com/react/default.asp

React Tutorial

- https://ko.reactjs.org/docs/getting-started.html

시작하기 – React

React Native는 React.js가 기반이다. 따라서 당근 React.js부터 먼저 알아야 한다. 두 말할 필요가 없음.

 

 

2.1. React.Fragments:

- https://ko.reactjs.org/docs/fragments.html 

Fragments – React

의외로 간단하면서도 강력한 태깅(?) 기법인데, 모르는 사람들이 많다. 알아두면 좋을 것 같아 2.1로 번호 매김.

 

 

3. JSX:
- https://reactjs.org/docs/jsx-in-depth.html 

JSX In Depth – React

React.js나 React Native의 태깅(?)을 이해해야 UI 표현이 자유로워진다. JSX가 무엇이고 어떻게 동작하는지 깊이있게 알아두는 것이 여러모로 유리하다.

 

 

4. Flow:
- https://flow.org/en/docs/getting-started/
- https://flow.org/en/docs/react/components/
- https://medium.com/duckuism/react-react-native-flow%EB%A1%9C-%ED%83%80%EC%9E%85%EC%B2%B4%ED%81%AC%ED%95%98%EA%B8%B0-d6f2a8b71924

Getting Started | Flow

Flow는 굳이 없어도 문제될 것은 없지만, 개발 작업 시 제대로 코딩하고 있는지 실시간으로 알 수 있게 해 주는 고마운 도구다. 너무 깊이 알 필요는 없지만 대충이라도 알고 적용해 두는 것이 좋다.

 

 

5. ESLint, Prettier:
- https://velog.io/@velopert/eslint-and-prettier-in-react 

리액트 프로젝트에 ESLint 와 Prettier 끼얹기

개발 작업 시 굉장히 유용한 도구들. ESLint는 Lint 시리즈 중 ES(ECMAScript)용이란 의미인데, Visual Studio Code와 궁합이 좋다. 코드를 자동으로 깔끔하게 유지 관리할 수 있게 도와준다. Prettier는 좀더 깔끔하고 규칙적으로 만들어준다. 둘 다 쓰는 것이 안 쓰는 것보다는 훨씬 좋다. 필수는 아니지만.

 

 

6. React Native:
- https://reactnative.dev/docs/getting-started
- https://reactnative.dev/docs/platform-specific-code#platform-module
- https://reactnative.dev/docs/tutorial
- https://www.tutorialspoint.com/react_native/index.htm
- https://wit.nts-corp.com/2020/03/23/6014
- https://academy.realm.io/kr/posts/react-native/
- https://nomad-academy.teachable.com/p/fucking-react-native-apps

Introduction · React Native

React Native는 6번째다. 사실 Flow나 ESLint/Prettier보다는 앞에 둘까 했지만, 제대로 React Native에 깊이 들어가기 전에 코딩 습관이나 규칙, 깔끔한 유지 관리를 선행하는 것이 더 좋겠다 싶어... 그래도 결국은 React Native 자체를 가장 많이 알아야 한다. 당연한 것!?!!

 

 

7. nativebase:
- https://docs.nativebase.io/ 

Introduction · NativeBase

React Native 자체에는 그닥 쓸 만한(?) 컴포넌트가 없다. 그래서 대부분 수많은 제3사 라이브러리 패키지들을 import 해서 쓴다. 그 중에서도 단연 돋보이는 것이 바로 이 NativeBase. 쓸 만한(?) 컴포넌트들이 굉장히 많다.

 

 

8. AppRegistry.registerComponent:
- https://suhanlee.github.io/2017/react-native-guide-1.html
- https://suhanlee.github.io/2017/react-native-guide-2.html 

[react-native] React Native 입문 - 1

React Native와 React.js의 가장 큰 차이점은 이 진입점부터라고 할 수 있다. 그래서 이 시작 지점, 진입점을 잘 알아두는 것이 중요하다.

 

 

9. CodeSandbox:
- https://codesandbox.io/ 

CodeSandbox

의외로 웹 브라우저 상에서 미리 코딩하고 결과를 확인해 볼 수 있는 이런 도구가 유용할 때가 많다.

특히 간단한 기능을 시험해 보려고 할 때.

 

 

10. navigation(React-Navigation vs. RNRF(react-native-router-flux)):
- https://reactnavigation.org/docs/getting-started/
- https://docs.nativebase.io/docs/examples/navigation/RNRFBasicExample.html
- https://m.blog.naver.com/gusrn1423/221038189505

React Navigation

React Native는 UI 개발언어다. 그렇다 보니 가장 중요한 것이 또 UI 네비게이션이다.

기본 React Navigation과 제3사 라이브러리 패키지인 RNRF를 모두 소개해 본다.

따지고 보면 비슷비슷한데... 입맛대로 골라쓰면 된다. 이왕이면 최신 기술이 반영되어 있는 React Navigation을 쓰는 것이 더 좋지 않을까... 정도?

 

 

11. static class properties:
- https://ko.javascript.info/static-properties-methods
- https://medium.com/front-end-weekly/understanding-static-in-javascript-10782149993
- https://heecheolman.tistory.com/40

정적 메서드와 정적 프로퍼티

ES7에 새로 추가된 문법도 알아두면 좋다. 편리하니까 추가된 것!

 

 

12. axios vs. fetch:
- https://github.com/axios/axios
- https://hoorooroob.tistory.com/entry/React-React-Naive-TIPS-axios-%EC%99%80-fetch-%EC%96%B4%EB%96%A4-%EA%B2%83%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%A0%EA%B9%8C

axios/axios

Javascript에서 Ajax를 이용하여 서버 호출하는 방식이 수십 가지인데, React Native에서는 대략 이 두 가지가 가장 많이 쓰인다. 둘 다 알아두는 것이 좋다.

 

 

13. Redux vs. Mobx: (@observable, @persist)
- https://woowabros.github.io/experience/2019/01/02/kimcj-react-mobx.html
- https://velog.io/@velopert/begin-mobx
- https://mobx.js.org/best/actions.html
- https://hyunseob.github.io/2017/10/07/hello-mobx/

React에서 Mobx 경험기 (Redux와 비교기) - 우아한형제들 기술 블로그

React Native에서 가장 진입 장벽이 높은 상태 관리 라이브러리. 이해하기도 만만치 않지만, 이해했다고 해도 제대로 구현하는 건 훨씬 더 어렵다. 조금이라도 더 쉽게 접근하고 이해도를 빨리 끌어 올리려면 Redux보다는 Mobx를 쓰고, 그것도 데코레이터(@observable/@observer) 방식으로 사용하면서 하나씩 시행착오를 겪어 보는 것이다.

 

어쨌거나 결론은 간단하다. 상태 관리 라이브러리는 상태를 변경하고 유지하는 것을 쉽게 처리하도록 도와주는 역할을 하는 것이므로 이 "상태"라는 것이 뭔지 먼저 알아야 한다. 즉, this.state 와 this.setState()를 먼저 알아야 상태 관리 라이브러리의 역할과 그 사용법을 정확하게 이해하고 사용할 수 있다.

 

 

14. Mobx-utils:
- https://github.com/mobxjs/mobx-utils
- https://kimchanjung.github.io/programming/2020/06/24/react-mobx-async-action/

mobxjs/mobx-utils

Mobx를 쓰면서 비동기(Async) 호출 방식으로 사용하려면 필요한(?) 유용한(?) 추가 라이브러리 패키지. 뭐, 꼭 필수인 것은 아니다.

 

 

15. lodash:
- https://lodash.com/
- https://ui.toast.com/weekly-pick/ko_20190515/

Lodash

로-대쉬, 즉 밑줄(low-dash)이라는 뜻의 이 라이브러리 패키지는 Array, Collection, Number, String, Object 등 Javascript의 거의 모든 함수를 다 가지고 있는데, 상당히 유용한 확장 기능을 제공해 준다. 좋다. 보통은 주로 배열을 다룰 때 많이 쓴다. _.map(), _.forEach(), _.split() 등 몇 가지 용법이라도 알아두면 아주 편리하다.

 

 

16. uri scheme (deeplink):
- https://developer.android.com/training/app-links/deep-linking?hl=ko
- https://github.com/dabit3/react-native-deep-linking/blob/master/home.js
- 0.61: https://reactnative.dev/docs/0.61/linking#docsNav
- 0.63: https://reactnative.dev/docs/linking#docsNav

앱 콘텐츠 딥 링크 만들기  |  Android 개발자  |  Android Developers

URI Scheme이라고도 부르고 Deeplink라고도 부르는 이 기능은 모바일 환경에서 앱 간 호출을 담당하는 기능이다. 자주 쓰이는 기능은 아니지만 결제 앱과의 연동, 브라우저를 통한 앱 실행 등이 필요할 때 알아두면 좋은 고급 기능.

 

 

17. Image Resize:
- https://github.com/bamlab/react-native-image-resizer
- https://github.com/react-native-image-editor/react-native-image-editor
- https://jsdev.kr/t/api-imageeditor-cropimage-resizing/2404

bamlab/react-native-image-resizer

모바일은 아무래도 데이터 사용량에 민감한 환경이므로 이미지나 동영상 같은 경우 크기를 조절해야 할 필요가 많다. 이미지는 이 라이브러리를 이용해서 조절하면 된다. (카메라 촬영 등으로 자체 생성하는 이미지인 경우에 그렇다는 것이고, 서버에서 생성하는 이미지는 ImageProcessor 등의 서버 도구로 서버에서 크기나 화질 등을 조절해서 모바일로 내려보내는 것이 최선이다.)

 

 

18. react-native-fast-image:
- https://github.com/DylanVann/react-native-fast-image

DylanVann/react-native-fast-image

React Native에서 기본 제공하는 <Image> 태그는 버그가 많다. 깜박거림, 캐시 문제 등... 그래서 누군가가 제3사 확장 기능인 <FastImage>를 만들었는데, 기본 기능보다 90% 이상 좋다. 나머지 10% 정도는 뭐... 쓰기에 따라 안 좋아질 수도 있지만(source URL 업데이트 및 캐시 관리 방식에 조금 문제가 있을 수 있다) 상태 관리를 잘 해서 극복하면 100% 이상 활용할 수 있다.