React란?
우리가 웹사이트를 만들기 위해서는, 사실 React.js나 Vue.js, Angular.js와 같은
프론트엔드 프레임워크, 라이브러리는 필요없다!
그저 HTML, CSS로 만들면 그만이기 때문이다.
추가적으로 자바스크립트를 사용한다면, 동적으로 화면을 보여줄 수 있다.
그런데, 요즘의 웹은 웹페이지로 끝나는 것이 아니고, 웹 어플리케이션이다.
즉, 브라우저 상에서 소프트웨어를 돌리는 수준이다.
예를 들어, 요즘의 웹을 보게되면, 한 페이지 내에서 정말 다양한 것을 할 수 있고,
이것들은 사용자와의 상호작용 을 통해 발생한다.
간단하게 숫자하나를 바꾸려면, 우리는 자바스크립트로 가서,
해당 HTML 요소를 찾은 뒤 어떻게 바꿔줄지 코드로 작성해주어야 한다.
이 기본적인 프로세스는 MVC 패턴을 기반으로 돌아간다.
파생적으로 MVVM 과 같은 패턴들도 이와 일맥상통하다.
사용자와의 상호작용이 많지 않다면, 써주는 것으로 끝날 수 있지만,
프로젝트의 규모가 커지고, 다양한 UI, UX를 경험하도록 만들고 싶다면,
이건 너무너무 힘든 작업이다.
그래서 이 DOM(Document of Models) 관리를 최소화하고 기능 개발, UI 구현에
집중하도록 하기 위해서 만들어진 라이브러리들 중 하나가 React 이다.
페이스북은 왜 React를 만들었을까?
We built React to solve one problem: building large applications with data that changes over time.
번역: 우리는 지속해서 데이터가 변화하는 대규모 애플리케이션을 구축하기 위해 React를 만들었습니다
결국 DOM을 찾아 일일히 바꿔주게 되는 것은
- 복잡하다.
- 처리속도가 느려 페이지 로딩이 느려진다. (DOM 변화가 최소일 수록 빠르다.)
와 같은 단점이 존재한다.
역시 이 작업은 MVC 패턴을 기반으로 작동한다.
- 이벤트 발생
- 모델 변화
- DOM 찾기
- View 업데이트
이 작업은, 업데이트가 될 때마다 view를 다시 칠해야 한다!
그런데 만약 페이스북 같이 스크롤을 내리다보면 방대한 데이터가 로딩 이 되고,
이걸 표현하는 요소 도 많아진다.
따라서 이걸 계속 새롭게 로딩하는 것 자체가 부담이고, 느려질 수 밖에 없다.
처음 모델과, 변화한 모델 두개를 비교하자.
그러면 여기서 생각하게 된 아이디어의 핵심!
계속 다시그리지 말고, 바뀐 곳만 지우개로 지우고 다시 그리자!
우리는 모델에서 변화한 값을 View로 계속 그렸었다.
그런데 그렇게 하다보니, 변화하지 않은 값과 변화한 값 둘 모두를 계속해서 다시그리는 수고를 범했다.
이러지 말고, 변화한 곳만 알아내서 거기만 다시그리면 되지 않을까?
이때 나온 개념이 Virtual DOM 이다.
Virtual DOM 을 사용해서 Update하는 절차
- 기존에 View 에 있던 정보를 기억한다.
- 모델이 업데이트 된다.
- 1, 2를 서로 비교한다.
- 바뀐 부분을 기존 View에서 변화시킨후 적용한다.
Virtual DOM의 이해를 위한 영상 (클릭시 이동)
- React and the Virtual DOM (https://www.youtube.com/watch?v=muc2ZF0QIO4)
Node.js 설치
Version 확인
$ node --version
v10.16.0
$ npm --version
6.9.0
npm은 Node Packaged Manager 의 약자이다.
python 의 pip 와 비슷하다.
Create React Native App 설치
Create React Native App (이하 CRNA) 는 React Native 프로젝트를 시작하기
쉽게 해주는 도구이다. Expo 라는 회사랑 협업해서 나온 라이브러리 이다.
#CRNA 설치
$npm install -g create-react-native-app
만약 맥 사용자가 설치가 안되고
npm WARN checkPermissions Missing write access to /usr/local/lib/node_modules
같은 에러가 뜰 경우,
$sudo npm install -g create-react-native-app
이렇게 해주자. 최고 관리자가 내리는 명령어의 약자이다. (super do)
CRNA 프로젝트 생성하기
#CRNA로 첫번째 프로젝트 생성하기
$create-react-native-app first-project
Expo CLI 라는 패키지를 받아야 한다고 알려준다.
Blank를 선택하자.
first-project로 이름을 설정해주자.
혹시 여기서 오류가 뜬다면, sudo 키워드를 붙여주자..
그러면, 웹상으로는 이런화면이,
터미널 창에는 이렇게 뜰 거다!
정말 안믿기겠지만 우리는 앱을 만들었다!
저 QR 코드를 스캔하면 앱이 실행된다🙂
노트북과 스마트폰이 같은 와이파이를 잡고 있어야 시뮬레이터가 실행된다.
Expo App 설치
안드로이드
playstore에 접속해 expo앱을 다운받자.
그리고 Scan QR code버튼을 클릭해 QR 코드를 스캔해보자.
아이폰
앱 스토어에서 expo앱을 다운 받자.
그리고 카메라 앱을 켜서 QR 코드를 스캔하자.
작동확인!
