JSX 의 기초

부모자식 관계 다 알고 있는 내용이고

return (
	<View style={styles.container}>
		<Text>First PIMS APP</Text>
		<StatusBar style="auto" />
	</View>
);

위와 같이 해주면 됨.

• 하나의 부모로 감싸야한다. 안되면 <> </> 로 감싸면 된다.

그 외에는 jsx 우리 지난 react 때 공부했던것과 같음

계산기 앱

그냥 만들면 됨.

컴포넌트 별로 자르자

화면을 나타내는 UI

• 숫자 버튼
• 연산 버튼
• 화면 결과

<View> 컴포넌트는 div 태그와 거의 비슷하다. <Text> 컴포넌트는 span 태그라고 보면 되겠다.

Style 에 대하여

import { StyleSheet } from 'react-native';
...
function App() {
  return (
    <View style={styles.container}>
  );
}

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

위와 같이 StyleSheet 를 import 해와서 사용하면 css처럼 사용이 가능하다. key 값 형태로 객체로 전달하는 것이다.

그러면 아래와 같이 사용이 가능하다.

import { StatusBar } from 'expo-status-bar';
import { Button, StyleSheet, Text, View } from 'react-native';

export default function App() {
	return (
		<View style={styles.container}>
			<Text style={styles.text}>Calc File</Text>
			<StatusBar style="auto" />
		</View>
	);
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: '#fff',
		alignItems: 'center',
		justifyContent: 'center',
	},
	text: {
		fontSize: 30,
		fontWeight: '700',
		color: 'green',
	},
});

위와 같이 사용할 수 있다.

가독성이 좋아지고 재사용성이 좋아진다.

또한 두개의 style을 동시에 쓰는 경우는 배열로 사용한다.

<Text style={[styles.text, styles.error]}>Error Message </Text>

위와 같이 사용하면 text의 속성에 error 속성이 덮어쓴다.

text 속성이 초록색 error 속성이 빨간색 이라면,

글자색은 빨간색으로 뜨는것이다.

따라서 아래와 같이 동적으로 사용하는 것도 가능하다.

import { StatusBar } from 'expo-status-bar';
import { Button, StyleSheet, Text, View } from 'react-native';

export default function App() {
	const isError = true;
	return (
		<View style={styles.container}>
			<Text style={[styles.text, isError && styles.error]}>Error Message </Text>
			<StatusBar style="auto" />
		</View>
	);
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		backgroundColor: '#fff',
		alignItems: 'center',
		justifyContent: 'center',
	},
	text: {
		fontSize: 30,
		fontWeight: '700',
		color: 'green',
	},
	error: {
		color: 'red',
	},
});