왕초보를 위한 리액트 네이티브(React Native) 시작하기

안녕하세요 :) Zedd입니다.

오늘은 리액트 네이티브를 시작?하는 과정을 할거에요. 저도 처음이라....ㅎㅎ Mac에서 진행합니다.

이거는...공부 카테고리로 넣는게 맞겠죠?

시작!

왕초보를 위한 리액트 네이티브(React Native) 시작하기

---

솔직히 그냥 여기(페이스북에서 제공하는 튜토리얼)보면서 따라하는건데..필요하시면 참고하세요!

 일단 터미널로 갑니다.

brew install node
brew install watchman

위 명령어들을 입력해줍니다. 

-bash: brew: command not found

가..나오신다면...

 /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

를 쳐주세요!! 그럼 비밀번호 치고 뭐 설치가 쭈루룩 될거에요! 아무튼 homebrew를 다 설치하셨으면 위에 명령어 2개를 터미널에 입력해주세요.

Watchman은 페이스북의 툴로, 파일시스템의 변화를 감지한다고 합니다. 성능 향상을 위해 설치하는것이 좋아요!

그리고

npm install -g react-native-cli

위 명령어도 쳐주세요. 

만약 Cannot find module 'npmlog'라는 에러가 뜬다면,

curl -0 -L https://npmjs.org/install.sh | sudo sh.

명령어를 이용해, npm을 직접적으로 설치해주세요.

이제 설치?같은건 끝났고 이제 새로운 "프로젝트"를 만들어 볼거에요.

저는 Desktop이 편하니까...터미널에서 cd로 Desktop으로 이동 한 후에 프로젝트를 만들거에요.

원하는 디렉토리로 가주시고,

react-native init AwesomeProject

라는 명령어를 입력해주세요. AwesomeProject는 프로젝트 이름이에요! 여기에서 이렇게 나와있긴한데, 원하시는 이름으로 바꿔도 좋아요 :)

그러면!!

막 어쩌구 저쩌구 막 뭔가 설치가되면서

아까 이동했던 디렉토리에 폴더가 하나 생기게 됩니다. 저는 Desktop에 생겼겠죠?

이제 이걸 실행해볼거에요!!!!!!!

해당 디렉토리로 가주세요.

저같은 경우에는 

cd AwesomeProject

겠죠?

그리고

react-native run-ios

위 명령어를 입력해줍니다.

그럼 진짜 완전 터미널이 생 난리를 치면서 뭔가 설치하는 듯한 막 뭔가 엄청 길게 뭔가를 합니다.

기다려주세요.

저는 갑자기

이런게 떠서..헐...했는데

기다리니까 밑에 

이런게 뜨더니!!!

이렇게 잘 실행이 됐습니다 크크

< 리액트? 리액트 네이티브? >글에서 말했듯이, 리액트 네이티브의 장점이 뭐랬죠?

네.. 컴파일 시간을 줄여주는 거였는데!!!!!!!!!!! 

메세지를 보니까, App.js를 수정하고 그냥 Cmd+R를 눌러서 리로드해 ㅇㅇ 이거같은데, 한번 해봅시다. 

일단 App.js를 수정하려면, 텍스트 에디터가 있어야 합니다. 저는 아톰을 사용해볼게요.

이렇게 아톰으로 열어줍니다.

그리고..

...이렇게 하니까 잘 안보이네요............

Xcode에서는 소스코드한번 바꿔서 시뮬레이터로 보려면, Cmd+R를 눌러서 아예 앱을 재설치?하는 식으로 했었지만..

리액트 네이티브에서는 소스를 바꾸고-> 저장 반드시 해야합니다...!!! 저장 꼭해주세요.(Cmd+S) -> 시뮬레이터 클릭하고 Cmd+R을 하면 바뀌게 됩니다.

잘 보시면, 

Welcome to React Native!가 안녕하세요!로 바뀐것을 볼 수 있죠.

넘나 신기한것..............

다만 제가 자바스크립트를 몰라서...너무 음..낯설다는것?

자바스크립트 공부를 해야겠네요 :)...

리액트 네이티브를 시작하는데 도움이 되었으면 좋겠어요 XD

+ ) 아 나는 시뮬레이터에서 Cmd+R누르는것도 귀찮다!!!!!!!!!!!!!!!!

라는 분들을 위해 엄청난...기능을...발견...

시뮬레이터 안에서 Cmd+D를 눌러주세요.

그럼 무려 "Live". 즉 실시간으로 리로딩 할수 있는 옵션이 나오게 됩니다.

이걸 눌러주세요.

움짤은..없지만 이 옵션을 체크 한 상태에서, 코드를 수정하고, 저장(Cmd+S)를 누르게 되면!!!!! 시뮬레이터가 알아서 자동으로 리로딩됩니다 XD 짱신기...

+ ) 

이 코드가 각각 무슨일을 하는지 알면 좋을 것 같아서요!!!!!

딱 지금 코드 상태를 보면, 4조각으로 나눌 수 있을 것 같죠? 하나씩 보겠습니다.

이부분은 필요한 모듈들을 import하는 코드에요. 대충보니까, from 'react'라는걸 보면, react로부터..?라는 것 같죠? 

맞아요.

import React, { Component } from 'react';

첫번째 import는 'react'로부터 모듈을 로드하고, React라는 변수에 넣는 작업이에요. 

소멸할당(destructuring assignment)이라 불리는 것을 사용하여 Component객체를 가져온다고 보시면 됩니다. 

그리고 두번째 이부분! 이부분은 특정 플랫폼에 따른 메세지를 세팅해주는 작업이에요.

저는 iOS라서 

이 메세지가 떴지만.... 안드로이드 였다면 Double~어쩌고로 시작했겠죠?

그리고 세번째 부분.

UI를 나타내는 구성요소를 정의하는 부분이에요. 

뭔가 이 부분이 두번째 코드 부분보다 먼저 나와야 할 것 같지만...아직 JavaScript문법을 잘 몰라서 모르겠네요..

아무튼

이 코드 전체가 

이 부분을 담당합니다.

엥;;; 아까 Press~menu이 부분은 두번째 코드 부분에서 담당한거 아닌가요?

위 코드에서 

여기서 위에서 만든 instructions를 가져오고 있답니다. :)

그리고 마지막 코드 부분인

네번째 코드 블럭!!

뭔가 코드를 보면, align.....center...중앙정렬...? 

backgroundColor..배경색상......폰트사이즈.......마진....이러는거 보니까 뭔가 레이아웃과 appearance를 담당한는 것 같네요. 

맞습니다! 컴포넌트의 layout 과 appearance를 제어하는 style객체를 생성하는 부분이에요. 

허허 아무튼 각각 코드가 하는 일을 정리해봤어요!!!!! 훨씬 뭔가 이제 이해가 되는 그런 느낌? 키키