React native 01

React native

Core Component 사용 예시

import {Text} from 'react-native'

const RN = () => {
  return <Text>Hello, I am your React Native UI!</Text>
}

export default RN;

Custom Component

• React.Component를 상속하여 정의
• 사용자 정의 컴포넌트를 만들 수 있음

Component Lifecycle

JSX

• JavaScript내에 HTML과 유사한 XML태그를 활용하여 UI를 선언
• style 명칭을 카멜 표기법으로 사용해야함 ex)backgroundColor

import {Text, View} from 'react-native'

const MyJSX = () => {
  const name = "Mari"
  return(
    <View style={{backgroundColor:'blue',flex:0.3}}>
      <Text>This is {name === "Maru" ? "Maru" : "who?"}</Text>
      <Text>This is Closing Tag</Text>
    </View>
  )
}

export default MyJSX;

Props = Properties

• Component의 속성과 설정을 전달
• 상위 Component에서 하위 Component로 전달 가능
• 한 번 정해지면 생명주기 동안 속성 변경은 불가능

import {Text, View} from 'react-native'

const ChildComPN = props => {
  return (
    <View>
      <Text> Hello, I am {props.name}</Text>
    </View>
  )
}

const ParentComPN = () => {
  return (
    <View>
      <ChildComPN name = "Parent1"/>
      <ChildComPN name = "Parent2"/>
    </View>
  )
}

export default ParentComPN

State

• 상황에 따라 변화하는 Component를 만들기 위해 활용

import React, {Component} from 'react';
import {Text, View} from 'react-native';

export default class App extends Component {
  state = {
    myState : 'It will change on clicking it'
  }
  updateState = () => this.setState({myState : "The state is updated"})
  render() {
    return (
      <View>
        <Text onPress={this.updateState} style = {{fontSize:20}}>
        {'\n'}
        {'\n'}
        {this.state.myState}</Text>
      </View>
    )
  }
}