React Native - 핵심 컴포넌트로 작업하기

핵심 컴포넌트

view

• html의 div와 비슷한 역할을 한다.
• 복수의 자식 컴포넌트를 갖을 수 있다.
• 텍스트를 넣을 수 없다.

Button

• title 안에 string을 추가하여 버튼 안에 글자를 나타낸다
• 닫음 태그 없이 단일 슬래쉬로 닫는다.
• 스타일 프로퍼티를 제공하지 않는다.

App.js

import { StyleSheet, Text, View } from 'react-native';
import { Button } from 'react-native-web';

export default function App() {
  return (
    <View style={styles.container}>
      <View>
        <Text>Another piece of text!</Text>
      </View>
      <Text>Hello World!</Text>
      <Button title='Hello' />
    </View>
  );
}

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

에러 발생

Text strings must be rendered within a component

태그만 지워서 돌려보니 잘 돌아가길래..서치해 본 결과, 컴포넌트의 title 속성 값을 컴포넌트로 감싸줘야 문자열이 컴포넌트 내부에서 올바르게 렌더링된다고 한다.