React Native의 주요 컴포넌트와 스타일링

React Native의 주요 컴포넌트

React Native에서는 <div>, <h2> 같은 HTML 태그를 사용할 수 없다.

네이티브 앱은 브라우저에서 실행되지 않으며, DOM이 없기 때문이다.

대신 React Native는 우리가 작성한 JSX 태그를 각 네이티브 환경에 맞게 변환해준다.

 

예시

React Native JSX의 <View> 는 각 환경에서 아래와 같이 변환된다.

• React-dom의 <div>
• Android Native Component의 android.View
• iOS Native Component의 UIView

 

App 컴포넌트

App.js 파일에서 App 컴포넌트를 내보낸다.

이는 앱의 루트 컴포넌트로 사용된다.

 

View 컴포넌트

HTML의 div와 유사하지만, 내부에 직접 문자열을 넣을 수 없다.

텍스트를 넣고싶은 경우 <Text> 태그를 사용해야 한다.

<View>
  <Text>텍스트를 작성하고 싶은 경우 이 태그를 사용하자!</Text>
</View>

 

 

Button 컴포넌트

HTML의 button 태그와 유사하지만 다른 점이 있다.

• 셀프 클로징 태그다.
• title 프로퍼티를 사용해 텍스트를 지정한다.

<Button title="클릭!" onPress={() => alert('버튼 클릭')} />

 

스타일 적용하기

마찬가지로 React Native에는 CSS도 없다.

대신 컴포넌트의 style 프로퍼티를 통해 인라인 스타일을 적용하거나 스타일시트 객체를 활용한다

 

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={{margin: 16, padding: 10, backgroundColor: 'blue' }}>Hi!</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff'
  }
})