ReactNative?
-
JS로 코딩한 react의 컴포넌트가 native 플랫폼을 거쳐 object-c나 java로
변환되어 네이티브 엔진에게 메시지를 보낸다.
즉 연결해주는 브릿지 역할을 해준다.
-
react와 같은데 다른점은 패키지를 추가해야된다.
import {Text, View} from 'react-native'; -
웹에서 div와span이 있는것처럼 네이티브에는 text와 view의 요소가 있다.
-
expo는 native 파일들을 관리해주는 툴이다.
React-Native 설치
-
npm install -g react-native-cli
:전송되는 목표uri -
react-native init 프로젝트명
: 프로젝트 생성 -
그다음CLI를 실행하면 X code로 시뮬레이터가 실행된다.
: expo로 생성된 프로젝트의 app.json 파일은 expo가 읽는 파일로 코드에 속하지 않는 앱의 일부들을 구성해준다.
ReactNative 구조
리액트 네이티브 소스 -> Page render -> 리액트 컴포넌트 DOM에 마운팅 -> 브릿지 -> 리액트 컴포넌트 랜더링(ios인 경우 Objc api / android인 경우 java api) -> 해당 플랫폼의 process
-
React.js인 경우, 브라우저 DOM에 랜더링하지만, React Native는 브릿지를 통해 각각 플랫폼으로 랜더링한다.
-
package.json
프로젝트 정보와 의존성인 dependencies를 관리하는 문서이다. -
yarn.lock
프로젝트와 관련된 모듈들이 기록된 파일. 모듈들의 버전관리. -
app.js
앱 실행시 눈으로 보이는 화면으로 이 파일에 여러 컴포넌트들을 import하여 화면을 구성한다.
-
index.js
프로젝트를 실행할떄 가장먼저 실행되는곳으로 app.js를
import하고있어서 app.js화면이 보여진다.
Component
: UI 구성 단위로 하나 하나의 단위로 클래스형 / 함수형 컴포넌트가 있다.
한개의 컴포넌트에는 한개의 ReactDOM.render를 사용한다.
컴포넌트는 또다른 컴포넌트를 포함할 수 있다.
인라인 스타일은 자바스크립트언어를 스타일상태 자체를 객체형태로 주입 시켜주려고 {{}} 중괄호를 두개 써준다.
- JSX
:JS의 확장문법으로 컴포넌트안 바깥에 감싸주는 태그가 있어야되고 그 상위 태그에 class가아닌 className으로 해줘야한다. - gitignore
:안에는 dependencies에 깃헙에 올리거나 할때 보이기 싫은 폴더를 써준다.
Props
: 원래 들어가는 속성들을 attribute라고 하는데 리액트에서는 props라고 한다. 프로퍼티도 결국엔 객체이다.
{this.props.title}
{this.props.sub}
->이러한 형태들을 지닌다.
State
: State는 컴포넌트의 상태를 말하며 초기 상태값이 필요하다.
constructor(){
super();
this.state={
toggleState:true
}
}이러한 객체에서 state 초기값을 설정해주고,
밑에 render인 자식요소에서 상태인 요소를 반영해주려고 state 지정해준다.
state만 쓸 경우에는 this.을 굳이 안써도된다.
P.S : 객체로 지역변수처럼 정해주고 사용한다.
state = {
stateBoxColor: "blue",
contents: "wecode",
toggleState: true,
childBackColor: "yellow",
twoColor: "purple"
};
handleColor = () => {
this.setState({
stateBoxColor: "hotPink"
});
};
handleSecondColor = () => {
this.setState({
stateBoxColor: "green"
});
};
handleToggle = state => {
this.setState({
toggleState: !this.state.toggleState
});
