공대생의 에러일기

JSX 기본 문법/ 태그 추가 - expo/리액트 본문

ETC

JSX 기본 문법/ 태그 추가 - expo/리액트

냥늉냥 2022. 1. 16. 00:04
반응형
//import {StatusBar} from 'expo-status-bar';
//import React from 'react';
import {StyleSheet, Text, View} from 'react-native';

 

expo를 사용하기 위해 App.js에 들어가보면 맨 위에 이렇게 import가 된것들을 확인할 수 있는데

맨 마지막 주석되지 않은 줄을 보면

저기 react-native에서 'StyleSheet, Text, View'라는 태그들을 사용할 수 있도록 가져오는 것입니다.

 

expo default function App() {
	return (
		<View style={styles.container}>
        	<Text>secukha.tistory.com</Text>
            <StatusBar style="auto" />
        </View>
    );
}

태그들을 사용할 수있도록 import에 적고나면 바로 아래 function App() 함수에서 <View>,<Text>,<StatusBar>태그들을 사용할 수 있게되는 것입니다. 

 

 

더보기

++ 추가사항

 

대부분의 태그들은 여는 태그와 닫는 태그가 쌍으로 존재 하는데 

StatusBar는 하나로만 열고 닫는다.

 

만약 다른 태그들을 추가로 사용하고 싶다면

 

https://reactnative.dev/docs/view?redirected 

 

View · React Native

The most fundamental component for building a UI, View is a container that supports layout with flexbox, style, some touch handling, and accessibility controls. View maps directly to the native view equivalent on whatever platform React Native is running o

reactnative.dev

여기 공식 리엑트 사이트에서 어떤 태그들을 사용할 수 있는지 확인하고 추가할 수 있습니다!

Comments