Mac 용 ReactNative 개발 세팅 완료!
- [Trouble shooting]예제 실행 시 com.github.facebook.watchman.plist for write: Permission denied에러가 남. 해결 방법 https://github.com/facebook/react-native/issues/9116 참고함.
sudo chown -R $(whoami):staff ~/Library/LaunchAgents
DOM과 렌더링
- Document Object Model(DOM)
- <div>는 HTMLDivElement 클래스의 instance. 이런 클래스를 DOM이라 부르고 DOM클래스의 인스턴스를 DOM 객체라 한다.
- DOM 객체는 부모/자식 형태의 tree structure를 이룬다. 이를 DOM 트리 구조 (= DOM 구조)라 한다.
- HTML을 파싱하여 js DOM구조로 만드는 것을 렌더링이라 함.
- 물리 DOM과 가상 DOM
- 물리 DOM구조: 웹 브라우저에서 js코드가 생성하는 실제 DOM구조.
- 가상 DOM구조: js 객체 구조이다. 가상 DOM을 물리 DOM구조로 만드는데 이 과정을 리액트가 렌더링한다고 한다.
- React vs ReactNative
- 리액트: react-dom이라는 renderer package를 사용하여 물리 DOM 구조로 렌더링 하는 방식으로 동작하는 framework
- react native: react-native라는 renderer package를 사용하여 렌더링하는 방식으로 동작함.
- App component -> UI객체 까지
- react package: App.tsx파일을 가상 DOM 구조로 만드는 역할을 하는 패키지.
- native renderer: react 요소를 android framework나 UI kit framework의 UI객체로 바꿔준다.
- JSX: Javascript XML의 줄임말. ESNext 자바스크립트 컴파일러인 babel이 플러그인 구조로 동작하기 때문에 JSX구문이 표준 js 문법에 포함된 것처럼 동작하도록 설계함. 바벨은 ESNext js코드를 파이프라인 형태로 동작하고, 이해가능한 구문만 컴파일 하여 ES5 js code로 변환한다. @babel/plugin-transform-react-jsx라는 바벨 플러그인을 사용해서 JSX 구문을 컴파일 하여 React.createElement 함수 호출 Js로 변환함.
- XML 표현(ex: <Text>Hello world!</Text>)가 XML parser가 React.createElement(Text, null, 'Hello world!') javascript code로 변환하면 이 텍스트를 자바스크립트에서 이용할 수 있다.
- JSX에서는 중괄호({})를 사용하여 js코드를 삽입할 수 있다. 그 안에는 표현식 expression 이 필요하다. 반대되는 개념이 execution statement이다. 표현식은 return 없이 값을 반환하는 코드이고, execution statement는 그 자체로 값이 아님.