구글 블로그에 소스코드 삽입하기

1. http://hilite.me/ 에서 소스코드 입력

2. HTML 복사

3. 구글 블로그에서 글 쓰기

4. 상단에 있는 HTML버튼 클릭

5. HTML 소스 붙여넣기

react native 기본 예제 따라하기 1

0. 안드로이드 스튜디오, 자바 설치

https://developer.android.com/studio/

설치 시 아래 항목을 체크

• Android SDK
• Android SDK Platform
• Performance (Intel ® HAXM)
• Android Virtual Device

환경 변수 설정

ANDROID_HOME

C:\Users\User\AppData\Local\Android\sdk

1. react-native-cli 설치

npm install -g react-native-cli

-g는 global이라는 뜻으로 해당 프로젝트에 적용하는 것이 아닌 전역 범위에 적용함

2. 프로젝트 생성

react-native init [프로젝트 명]

3. 프로젝트 실행

cd [프로젝트 명]
react-navtive run-android


오류

폴더 생성
android/app/src/main/assets

명령어 실행 
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

또는

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

이때 새로운 창이 로딩된다. 이 창은 프로젝트의 디버그 서버가 되어서 코드 변경 시 새롭게 빌드를 할 필요 없이 자동으로 적용된다.

프로젝트의 구조
. ├── App.js ├── android/ ├── app.json ├── index.js ├── ios/ ├── node_modules/ ├── package.json └── yarn.lock

app.js를 살펴보면 코드와 컴포넌트가 XML문서처럼 결합 되어있는 것을 볼 수 있음
-> JSX라 부름 

리액트 프로젝트는 index.js로 시작된다. 이것은 추후에 앱 구조에 따라 수정할 수 있다.

4. app.js 수정

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

import React, {Component} from 'react'; import {StyleSheet, Button, View} from 'react-native'; import TestComponent from './TestComponent'; const datas = [ {id:"gdHong",count:0,color:"red"}, {id:"ksYu",count:0,color:"green"}, {id:"ssLee",count:0,color:"blue"}, ]; type Props = {}; export default class App extends Component<Props> { constructor(props){ super(props); this.state={datas:datas}; } _updateCount(idx){ const newDatas = [...this.state.datas]; newDatas[idx].count = newDatas[idx].count + 1; // newArray[idx].count++; this.setState({datas:newDatas}); } render() { return ( <View style={styles.container}> { this.state.datas.map((data, index) => { return( <TestComponent key={data.id} id={data.id} color={data.color} title={data.count.toString()} updateCount={this._updateCount.bind(this, index)}/> ) }) } </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, padding: 20, }, });

export default class App extends Component<Props>

리액트를 사용하기 위해서는 Component<Props>를 상속 받아야함

this.state={datas:datas};

위에서 정의한 datas를 state로 사용하기위해 등록함

_updateCount(idx){

const newDatas = [...this.state.datas];

newDatas[idx].count = newDatas[idx].count + 1;

// newArray[idx].count++;

this.setState({datas:newDatas});

}

datas를 복사한 뒤 count를 +1해줌

this.setState를 사용하여 변경 값을 다시 state로 등록하고 랜더링을 다시 해준다.

<View style={styles.container}>

이 Component안에서 자바스크립트 객체를 사용하기 위해서는 {}를 사용해야함

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

render() { return ( <View style={styles.container}> { this.state.datas.map((data, index) => { return( <TestComponent key={data.id} id={data.id} color={data.color} title={data.count.toString()} updateCount={this._updateCount.bind(this, index)}/> ) }) } </View> ); } }

랜더링을 할 부분

updateCount={this._updateCount.bind(this, index)}/>

현재 _updateCount는 현 클래스의 this.state를 참조하기 떄문에 this를 넣어줌

(만약 this를 사용하지 않는다면 TestComponent에 있는 state를 참조하게 됨)

index는 함수에서 지정한 파라미터

4. TestComponent 추가

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

import React, { Component } from 'react'; import { View, Button, Text, } from 'react-native'; export default class TestComponent extends Component{ constructor(props){ super(props); } render(){ return( <View> <Text>{this.props.id}의 버튼</Text> <Button color={this.props.color} title={this.props.title} onPress={this.props.updateCount}/> </View> ) } }

this.props들이 하위 컴포넌트에서 사용하게 됨

-> 하위 컴포넌트에서 사용할 어트리뷰트들을 지정해둠

(껍데기? 같은 느낌??)

참고 : 

https://yuddomack.tistory.com/entry/4React-Native-State%EC%99%80-Props-2%EB%B6%80Props?category=754156