3_React Native 기초 - 기본 문법구조, props

React.js와 React Native관계

React Native는 React.js의 특수한(앱 컨트롤을 위한) 언어로, 네이티브 앱 언어로 변환될 수 있는 언어입니다.

아래와 같이 Web언어체계와도 차이가 있고, 네이티브 앱 언어와도 차이가 있죠.

위에서 보면, Web언어와 App언어, React Native 언어가 다릅니다.
위 상황으로 보면 완전 따로노는 모습인데, 왜 React Native가 생겨났을까요?

Web에서는 <div>를 쓰는데, App에서는 둘다 view라는 형태로 쓰고 있고,
Web에서는 <input>, App에서는 Text라는 형태를 쓰고있죠.

React Native는 App에 직관적인 <View>, <TextInput>을 사용합니다.
그리고 전반적인 문법을 JS(Java Script>체계로 쓰죠(엄밀히 말해서는 JSX).

아마도 Web개발자가 App개발에 접근하기 용이한 형태이기 때문이 아닐까 싶습니다.

App에서 시스템의 로직은 JS를 활용하는 반면,
UI는 App 고유의 문법을 써야 합니다.

React Native는 기존 JS 문법구조로 UI를 구성하기에
Web개발자가 접근이 좀 더 용이한 환경을 제공하기위함 일 것 같네요.

기존 Web개발자가 App개발(심지어 iOS와 Android가 다름)에 쉽게 접근하여
컴파일을 통해 iOS, Android 시스템을 모두 만들 수 있습니다.

 

---

그럼 React Native의 문법구조를 좀 더 자세히 볼까요?

 

React는 web componets를 활용하는 문법이며, native app components를 활용합니다.

따라서 React Native를 이해하기 위해서는 native components 구조를 알아야 하겠죠.

 

기본 문법은 ES6라고도 하는 ES2015 문법을 사용합니다.

*ES(European Computer Manufacturers Association Script) : 국제 표준 스크립트 프로그래밍 언어

import, from, class, extends 와 같은 것 들이 ES6문법입니다. 

특이한 부분이 <View><Text>Hello world!</Text></View>와 같은 부분이 코드안쪽에 들어가는데, 

JS(Java Script)에 XML이 쓰여진 JSX구조이죠.

이러한 방식으로 HelloworldApp과 같은 native component들을 만들어 사용하게 됩니다.

 

---

props(properties)

 

component를 만들 때, 특성 정보들을 만들어 "props"로 호출할 수 있습니다.

name 이라는 props를 만들어 호출(this.props.name)하는 예시입니다.

 

이미지에 대한 props는 "source" 라는 명칭으로 사용할 수 있습니다.

아래 예는 pic이라는 props를 만들어 source라는 구문으로 호출했죠.

 

 

참고자료

*구조이론 : https://www.youtube.com/watch?v=qSRrxpdMpVc&t=908s

*ES6문법 : https://itstory.tk/entry/JavaScript-ES6-%EB%AC%B8%EB%B2%95-%EC%A0%95%EB%A6%AC

*props : https://facebook.github.io/react-native/docs/tutorial