react-native
구성 요소

기본 구성 요소

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

class Example extends Component {
  render () {
    return (
      <View> 
        <Text> I'm a basic Component </Text>
      </View>
    )
  }
}

AppRegistry.registerComponent('Example', () => Example)

상태 유지 구성 요소

이러한 구성 요소에는 상태가 변경됩니다.

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

class Example extends Component {
  constructor (props) {
    super(props)
    this.state = {
      name: "Sriraman"
    }  
  }
  render () {
    return (
      <View>
        <Text> Hi, {this.state.name}</Text>
      </View>
    )
  }
}

AppRegistry.registerComponent('Example', () => Example)

상태 비 저장 구성 요소

이름에서 알 수 있듯이 Stateless Components에는 로컬 상태가 없습니다. Dumb Components 라고도합니다. 로컬 상태가 없으면 이러한 구성 요소에는 라이프 사이클 메소드 나 stateful 구성 요소와 함께 제공되는 많은 상용구가 필요하지 않습니다.

클래스 구문은 필요하지 않으며 단순히 const name = ({props}) => ( ... ) 됩니다. 일반적으로 상태 비 저장 구성 요소는 결과적으로 더 간결합니다.

아래에는 구성 요소간에 소품을 전달하는 데 사용되는 두 가지 상태없는 구성 요소 App 및 Title 의 예가 나와 있습니다.

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

const Title = ({Message}) => (
  <Text>{Message}</Text>
)    

const App = () => (
  <View>
    <Title title='Example Stateless Component' />
  </View>
)

AppRegistry.registerComponent('App', () => App)

가능한 경우 구성 요소에 권장되는 패턴입니다. 미래의 최적화와 마찬가지로 이러한 구성 요소에 대해 메모리 할당 및 불필요한 검사를 줄일 수 있습니다.