-
-
처음 배우는 리액트 네이티브 - 크로스 플랫폼 앱 개발을 위한 실전 입문서
김범준 지음 / 한빛미디어 / 2021년 2월
평점 : 
이 글에는 스포일러가 포함되어 있습니다.
리액트 네이티브는 요즘 플로터와 더불어 인기를 끌고 있는 모바일 개발 플랫폼이다. .
리액트 자체가 좀 어렵고, 혼자 해볼생각이 두려웠는데 입문서가 쉽게 나온것같아 책을 접하게 되었다.
기본 환경설정부터 내용이 자세히 나와있어서 설치하는데 어려움 없이 설치 할수 있었다.
기본 설치환경이 기존에 프로그램이 설치되어있으면 충돌이 날수도있으므로, 지우고 새로운 버전으로 설치 해보는게 좋은것같다.
첫 에뮬 에서 실행을 하는데에 좀 기존 설치된 것과, 충돌이 나는 부분이 있어서, 노드를 삭제 하고 재설치 하고 우여곡절 끝에 첫화면을 띄우는데 성공하였다.
import { StatusBar } from 'expo-status-bar';
import React,{Fragment} from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
const name = "Hanbit";
return (
<View style={styles.container}>
<Text style={styles.text}>
{(()=>{if(name==='Hanbit') return 'My name is Hanbit';
else if(name ==='Beomjun') return 'My name is Beomjun';
else return 'My name is React Native';
})()}
<StatusBar style="auto"/>
</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
text :{
fontSize:30,
}
});
생각보다 컴포넌트를 적용하는 코드는 기본초기 설치되는 소스가 있기 때문에 변경하여 적용하는것은 크게 어렵지 않은것같다.
import { StatusBar } from 'expo-status-bar';
import React,{Fragment} from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
const name = "Hanbit";
return (
<View style={styles.container}>
<Text style={styles.text}>
My name is {name ==='Bemjun'?'Beomjun kim':'ReactNative'}
</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
text :{
fontSize:30,
}
});
가변적인 값에 따라 화면에 표시가 달라지는 예제 이다.
import { StatusBar } from 'expo-status-bar';
import React,{Fragment} from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default function App() {
const name = "Beomjun";
return (
<View style={styles.container}>
{name==='Beomjun' && (<Text style={styles.text}>My name is Bemjun</Text>)}
{name!=='Beomjun' && (<Text style={styles.text}>My name is not Bemjun</Text>)}
<StatusBar style="auto"/>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
text :{
fontSize:30,
}
});
아직 모든 실습을 해보지는 못했지만, 에뮬레이터를 통해 바로 실습을 확인할수있고, 쉬운예제부터 차근 차근 실습위주의 내용으로,
리액트네이티브에 대해 처음 접하고자 하는 사람에게 매우 좋은 책이라 생각한다.