[React Native] 리액트 네이티브란, 리액트 환경 설정 - 에디터, node.js, iOS, Android

 

React Native (리액트 네이티브)란?

리액트 네이티브는 페이스북에서 2015년에 공개한 오픈소스 모바일 애플리케이션 프레임워크이다. JavaScript로 개발이 가능하며 하나의 프로그래밍 언어로 IOS와 안드로이드 모바일 앱을 동시에 개발할 수 있는 크로스 플랫폼으로

무려, 페이스북, 디스코드, 스카이프, 인스타그램, 핀터레스트, 월마트 등 리엑트 네이티브로 개발 되었다.

 

 

리액트 네이티브 장점

- 쉬운 접근성으로 웹 개발자가 익숙한 자바스크립트나 리액트를 이용해 모바일 앱을 개발할 수 있다는 장점이 있다.

- 자바스크립트로 코딩해서 한번에 Android와 iOS를 개발할 수 있다는 것도 장점이다.

- 변경된 코드를 저장하기만 해도 자동으로 변경된 내용이 적용된 화면을 확인할 수 있는 Fast Refresh 기능이 있다.

 

 

리액트 네이티브 단점

- 새로운 기능이 나와도 리액트 네이티브에서 지원하지 않으면 사용할 수 없다는 단점

- 디버깅이 어려워, 개발 단계에 문제가 생겼을 때 이를 해결하는 데 시간이 많이 걸린다.

 

리액트 네이티브 동작방식

Native ↔ Bridge ↔ Javascript 

 

리액트 네이티브는 자바스크립트를 이용해 코드를 작성하는데 Android, iOS에서 동작이 가능한데, 이를 가능하게 해주는 것이 bridge이다. 

 

이는 자바스크립트 스레드에서 정보를 받아 네이티브 스레드로 정보를 전달하는 역할을 한다. 

 

• 자바스크립트 영역
  • 자바스크립트가 실행되는 영역으로 리액트로 구성된다.
• 브릿지(Bridge)
  • 자바스크립트 스레드에서 정보를 받아 네이티브로 전달하며 자바스크립트 코드를 이용해 네이티브 계층과 통신을 할 수 있게 한다.
• 네이티브 영역
  • 메인 스레드

 

 

 

Virtual DOM (가상 DOM)

 

---

 

리엑트 네이티브를 하기 위해서 리엑트를 꼭 알아야 하는가?

리엑트 네이티브는 리엑트를 이용한다. 그러나 리엑트를 공부하고 리엑트 네이티브를 넘어갈 필요는 없다고 한다. 리엑트를 알면 더 좋겠지만, 리엑트 네이티브를 공부하면서 필요한 부분을 습득하면 된다.

 

그러나 자바스크립트는 알아야 한다.

 

 

리액트 네이티브 학습에 필요한 자바스크립트 사전지식

1. 변수
2. 함수(파라미터 기본값 설정, 즉시 실행 함수),
3. 조건문
4. 삼항연산자
5. 반복문
6. Array(forEach, map, push 등)
7. 템플릿 레터럴
8. Object(key를 이용한 값 가져오기)
9. try-catch-finally
10. 묵시적 반환
11.전개 구문
12. 객체 리터럴 표기법
13. 구조 분해 할당
14. Promiase, Async-Await
15. import와 export

---

 

리액트 네이티브 개발 환경 설정

 

1. 에디터

코드를 작성하는데 사용하는 도구에는 IDE와 code Editor가 있다.

 

IDE는 통합개발환경, Integrated Development Environment로 코딩, 디버깅, 컴파일 등등 프로그램 개발과 관련된 다양한 기능을 하나의 프로그램에서 처리할 수 있도록 해주는 도구이다.

 

에디터는 말그대로 코드를 수정하는 도구이다.

 

에디터에는 Sublime Text (서브라임텍스트), Atom (Atom), Brackets (브라켓), Visual Studio Code (비주얼 스튜디오 코드), WebStorm (웹스톰) 등 다양한 에디터가 많다.

 

편한 에디터를 선택하면 된다.

 

나는 비쥬얼 스튜디오 코드를 사용한다. 이와 관련된 설치와 익스텐션은 아래를 참고하자.

 

Visual Studio Code 쉬운 설치

Visual Studio Code 쉬운 설치/ VSCode 코드 편집기 추천 및 설치/ Vscode 한글 설정방법 / VSCode 코드 확대

 

비주얼 스튜디오 코드 익스텐션 20개 추천

비쥬얼 스튜디오 코드 익스텐션 17개 추천 / 확장 프로그램 설치 및 웹 개발 환경 설정 (Visual Studio

 

---

 

 

2. Node.js

Node.js 설치하기

Node.js란 설치하기 / Node.js란? / Node.js 사용이유 / 윈도우(window)

 

위와 같이 홈페이지에서 Node.js 를 설치해도 좋지만, nvm으로 관리하는 것이 좋다. 

 

NVM이란 Node Version Manager로 Node.js의 버전을 관리하는 도구이다.

 

 

2.1. NVM 사용 이유

- 컴퓨터에서 다양한 버전의 Node.js를 사용할 수 있게 해준다.

- 원하는 Node.js의 버전을 간편하게 스위칭할 수 있다.

- 디폴터 버전 설정, 설치한 버전 리스트 확인, 필요없는 버전 삭제 등 버전관리가 쉽다.

 

 

 

2.1. NVM 설치

NVM 설치하기 쉬운 설명

NVM 설치하기 쉬운 설명+사진 for Windows / NVM 사용 이유 / Node.js NVM 사용법

 

 

3. iOS

Expo를 사용한 iOS 개발

 

맥북이 없어도, iPhone만 있어도 iOS 개발이 가능하다. iPhone의 앱스토어에서 'Expo Go'라는 앱을 다운로드 받아서 설치하면 아이폰을 이용한 iOS개발을 할 수 있다.

 

---

4. Android

안드로이드도 iOS와 마찬가지로 Expo 앱이 있다. Google Play 스토어에 Expo를 검색 후 다운로드 받으면 된다.

 

 

 

만약 안드로이드 기기가 없는 경우에는 컴퓨터에 Android Studio를 설치해서 사용해야 한다. 아래 공식 사이트를 참고하도록 하자.

 

https://developer.android.com/studio/install?hl=ko 

Android 스튜디오 설치  |  Android 개발자  |  Android Developers