[2주차] 스파르타코딩클럽 - 앱개발

expo start > expo init [폴더명] > .blank > 폴더가 부모폴더일시 cd [폴더명]으로 해당폴더로 옮겨주기

실시간 시뮬레이터.화면 양분할 하는 방법 

app.js실행 후 저장 > 밑에 refreshed라는 멘트 생성(엔진.expo서버에 코드단에 바뀐 코드가 있는지 감지를 한 후,저장이 되면 리프레시를 한다) >휴대폰과 잭으로 연결한다.(미러링 프로그램 사용)

 

App.js를 다시 또 소개하자면 1) 간단히는 App.js는 앱의 화면을 그려주는 커다란 함수입니다. 또는! 2) 자세히는 App.js는 리액트 네이티브 라이브러리 그리고 Expo에서 제공해주는 기능들을 사용하여 화면을 그려주는 커다란 함수입니다. 여러분이 expo start로 시뮬레이터에 띄운 앱의 화면을 보면 App 함수에 기입되어 있는 글귀가 보이고 있음을 확인 할 수 있습니다.

 

app.js파일을 확인해보면 우리가 만들어가야할 구조와 굉장히 비슷하다.

 > 리액트네이티브의 모든 expo앱은 자바스크립트 파일.js로 이루어져있기 때문.그래서 이 규격에서 벗어나지 않는다.

1.상단은 import가 되어있다. : from.도구상자에서 도구를 꺼내다.(node_moduls폴더에서 꺼내옴) 가운데는 본문.함수를 큰거 하나 만들고 안에 리턴을 둠. 리턴 안 코드들은 화면을 그리는 코드다.

ex) import { StatusBar } from 'expo-status-bar';

오른쪽에 있는 도구 상자에서 왼쪽에 있는 도구를 사용한다.

2.리액트네이티브 프로젝트를 진행시

import React from 'react';

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

는 항상 존재해야 한다. >리액트네이티브니까 기본 도구함과 네이티브 기본 도구함 2개는 상단에 준비되어야한다.

리액트 도구는 대문자를, 네이티브에서는 필요한 태그들(jsx문법)을 꺼내서 사용한다.

3.자바스크립트 리액트네이티브 파일들은 항상 큰 함수안에서 코드를 작성해야한다.

ex)export default function App() : 지금 이 파일에 있는 함수를 내보내다.물론 위아래 코드 작성이 가능. 

하지만 리턴 안,밖에 역할은 각각 다르다. 밖의 코드는 함수(ex 애로우펑션),리액트에서 기본적으로 제공해주는 함수들을 사용한다. 안의 코드는 화면이 그려지는 부분으로 생각하면 된다.

JSX문법은 View,Text,Statusbar 등 대문자로 시작하는건 무조건 대문자로 시작해야한다.

-- style : js문법에 스타일을 입히는 속성. 하단에서 만드는 객체. 그렇게 만든 객체를 키값에 물린값으로 넣을 수 있게된다. 이게 옷이라고 생각하면 된다.

//우리가 리액트, 리액트 네이티브, 엑스포 라이브러리에서 꺼내 사용할 기능들을
//이렇게 앞으로도 상단에 선언한다음 가져다 사용합니다.
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

//App.js는 결국 App 함수를 내보내기 하고 있는 자바스크립트 파일입니다.
//이 함수는 무언가?를 반환하고 있는데 결국 화면을 반환하고 있습니다.
export default function App() {
	//화면을 반환합니다.
	//HTML 태그 같이 생긴 이 문법은 JSX라 불리우며 실제 화면을 그리는 문법입니다,
	//이번 강의에서 자세히 다룹니다

  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

// styles 변수 이름 답게 화면을 그려주는, 
//더 자세히는 JSX문법을 꾸며주는 내용을 담고 있습니다.
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

※리액트 네이티브를 개발하다보면 노란색 경고창이 뜨는 경우가 있습니다. 에러는 아니고 권장사항 정도를 알려주는 박스인데요! 

해결방법 : 리액트네이티브라는 도구상자에서 Logbox라는 도구를 꺼내서 LogBox.ignoreLogs 그다음에 오른쪽에 있는 코드를 복사해서 리턴 밖에 적용한다.

LogBox.ignoreLogs(['Warning: ...']);

 

App.js는 JSX문법으로 그려져 준비된 화면을 반환합니다. 반환 한다는 게 잘 와닿지 않다면, 단순히 화면을 그려준다 생각하면 편합니다. 즉, 리액트 네이티브에서 return은 여러분이 작성한 JSX문법으로 구성된 화면을 앱상에 보여주는 역할을 하는 겁니다. 😁 JSX문법을 화면에 그려준다는 행위, 동작을 이제 우린 렌더링(rendering)이라 부릅니다. 

JSX문법은 리턴문이 중요하다. 리턴은 값을 내뱉고 바깥의 변수가 받아 사용할 수 있는 구조다. JSX는 그것을 화면에 출력한다고 생각하면 된다. 그것을 렌더링이라고 함.

JSX가장 기본적인 모습은 꺽쇠<>로 이루어져있다. 앞에 대문자는 필수.html같이 열고 닫는 태그로 이루어져야한다.

 

<View> <Text>와 같이 꺽쇠로 쓰여져 있는 것들은 리액트 네이티브에서 JSX라고 부릅니다. 또하나의 화면을 그리는 문법입니다. 😁 JSX 문법상의 꺽쇠를 태그라고 부르고, <View>영역</View>과 같이 닫는 태그로 온전히 화면의 한 영역을 구성할 때 JSX에선 엘리먼트라 부릅니다.

 

(1) 모든 태그는 가져와서 사용함

app.js파일의 상단 import from의 어떤 도구함에서 어떤 도구를 꺼낼건지 결정한다.

모든 태그들은 리액트네이티브라는 도구에서 꺼내와 사용해야만 한다.

우리가 앞으로 사용할 태그들, View나 Text 같은 문법은 임의로 만든 태그들이 아닙니다. 리액트 네이티브에서 제공해주는, 이미 존재하는 태그 문법을 가져와서 사용하는 겁니다. App.js 파일 상단을 보면 우리가 화면을 그릴 때 사용할 태그들을 가져와 준비해 놓습니다.

리액트네이티브 도구를 확인할 수 있는 사이트

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

View · React Native

(2) 태그는 항상 닫는 태그와 자체적으로 닫는 태그를 구분해서 사용해야 함!

StatusBar >앱화면의 배터리와 와이파이부분의 색을 결정한다.이런 태그는 따로 닫는태그가 없다.

닫힌 태그와 안닫혀도 되는 태그는 공식 사이트에서 확인이 가능하다.

export default function App() {
  return (
		//<View>는 결국 두번째 줄 밑에 </View>로 닫히면서 본인 영역을 갖습니다 
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
			//statusBar는 본인 스스로 닫는 태그이므로 다음과 같이 사용이 가능합니다.
      <StatusBar style="auto" />
    </View>
  );
}

 Expo 공식 문서

https://docs.expo.io/versions/v38.0.0/react-native/view/

 

(3) 모든 엘리먼트는 감싸는 최상위 엘리먼트가 있어야 함. 엘리먼트는 곧! 태그 <> 입니다.최상위 엘리먼트가 없을 경우 오류가 발생한다.

//App.js가 렌더링 하고 엘리먼트는 결국
//Text와 StatusBar엘리먼트를 감싸고 잇는 View입니다.
export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

(4) return에 의해 렌더링 될 땐 항상 소괄호로 감싸져야 한다.

return ()

(5) JSX 문법 밖에서의 주석과 안에서의 주석은 다르다!

밖에서는 //, 안에서는 /**/ 왜냐하면 문법안은 JSX문법으로만 이루어져있고, 바깥은 JS의 영역이기 때문에 주석이 다르다.

//JSX밖에서의 주석
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
//JSX밖에서의 주석
export default function App() {
	//JSX밖에서의 주석
  return (
		//JSX 밖에서의 주석
    <View style={styles.container}>
			{/*
				JSX 문법 안에서의 주석
			*/}
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

//JSX밖에서의 주석
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

 

<view></view>

 쉽게 화면에 레이아웃을 잡는 태그.컨텐츠의 위치를 잡는 태그.

backgroundColor : 배경색 js표현.

 

<Text></Text> : 글자를 표현하려면 이 태그를 꼭 써야한다.

<ScrollView> : 많은 컨텐츠를 보여주기엔 View태그는 좋지 않다. 스크롤이 가능한 ScrollView가 적합하다.

<Button> : 알아서 닫히는 태그다. Title : 버튼의 제목 color : 버튼 색각 onPress : 눌렀을 때 어떤 함수가 실행되게하는 속성. 안에 해당되는 함수를 넣어라.

Button 태그를 예로 들면, 버튼 안에 잇는 문자는 title이란 속성에 값을 넣어서 구현 할 수 있고, 버튼 색상은 color 속성에 값을 넣어서 적용 할 수 있습니다. 눌렀을 때 어떤 이벤트가 일어나게 하려면 onPress에 함수를 연결(바인딩)하면 되는데, 이 부분을 좀 더 살펴보겠습니다.

모든 태그의 연한 파란색은 속성으로 취급한다. 태그가 갖고있는 속성이다.

리액트 네이티브의 공식 사이트에 여러가지 속성들을 확인할 수 있다.

https://reactnative.dev/docs/button

Button · React Native

또한 해당 버튼 태그는 안쪽에 함수를 넣어야 실행이 되는데 바깥쪽에서도 적용할 수 있다.

return문 밖 로직(앱 안에서 쓰일 코드들을 여기서 작성할 수 있다).js의 let처럼 쓰면 될 것같다.

함수를 바로 연결시키고자 한다면 ()소괄호는 제외한다. 소괄호의 함수 그대로 부르고 싶다 한다면 바깥에 함수를 만들고 함수()를 불러야한다.

onPress에 연결한 함수 구현부를 JSX 밖에서 구현한 다음 연결 할 수도 있습니다. 그땐 화살표 함수로 구현하여 함수를 만든 다음 연결해야 합니다.

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

export default function App() {
  //화살표 함수 형식으로 함수를 정의하고
  //jSX문법 안에서 사용할 수 있습니다
  const customAlert = () => {
    Alert.alert("JSX 밖에서 함수 구현 가능!")
  }
  return (
    <View style={styles.container}>
      <View style={styles.textContainer}>
        <Text style={styles.textStyle}>아래 버튼을 눌러주세요</Text>
        {/* onPress에 밖에서 구현한 함수 이름을 고대로 넣을 수도 있고*/}
        <Button 
          style={styles.buttonStyle} 
          title="버튼입니다 "
          color="#f194ff" 
          onPress={customAlert}
        />
        {/* onPress를 누르면 속성에 바로 구현해 놓은 함수 안에 customALert함수를 두고 실행할 수 있게도 가능합니다 */}
        <Button 
            style={styles.buttonStyle} 
            title="버튼입니다 "
            color="#FF0000" 
            onPress={() => {customAlert()}}
          />
          </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  textContainer: {
    height:100,
    margin:10,
  },
  textStyle: {
    textAlign:"center"
  },
});

SafeAreaView : 모든 기기의 상단부분을 맞춰준다.최상위뷰로 갈아치운다.위쪽 영역무시하고 직사각형인 영역만 고려해 화면이 그려져 안전하게 모든화면의 뷰를 고려한다.

 

<TouchableOpacity/> 

버튼과 같은 기능을 실행한다.안의 속성도 같음. 버튼은 스타일을 줄 때 어려움이 있지만, TouchableOpacity자유롭게 스타일링을 구현할 수 있다.

Button 엘리먼트는 본인의 영역을 갖습니다. 그렇기 때문에 스타일에도 신경을 써야 하고 ScrollView에서 처럼 카드 형식으로 만든 다음 화면 같은 경우엔 버튼 태그를 사용하기 어렵습니다.

이럴 때 사용하는게 TouchableOpacity 엘리먼트 입니다. 이 영역은 스타일은 주지 않은 이상 화면에 영향을 주지 않는 영역을 갖습니다.

<Image>

두 가지 방식이 있습니다. assets 폴더에 있는 이미지를 가져와서 사용하는 방법과 (import), 외부 이미지 링크를 넣어서 사용하는 방식입니다(uri).

 

assets폴더로 가져오는 방법

import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
//이렇게 상단에 가져와 사용할 이미지를 불러옵니다
import favicon from "./assets/favicon.png"

export default function App() {
  return (
    <View style={styles.container}>
			{/*이미지 태그 soruce 부분에 가져온 미지 이름을 넣습니다 */}
      <Image 
        source={favicon}
				// 사용설명서에 나와 있는 resizeMode 속성 값을 그대로 넣어 적용합니다
        resizeMode={"repeat"}
        style={styles.imageStyle}
      />
    </View>
  );
}

-Image 태그 사용 설명서

https://reactnative.dev/docs/image#docsNav

Image · React Native

 

외부 주소에서 가져오기

외부 이미지를 사용할 땐 source 부분에 uri를 사용하면 됩니다.

```jsx
import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
//이렇게 상단에 가져와 사용할 이미지를 불러옵니다
import favicon from "./assets/favicon.png"

export default function App() {
  return (
    <View style={styles.container}>
			{/*이미지 태그 soruce 부분에 가져온 미지 이름을 넣습니다 */}
      <Image 
        source={{uri:'https://images.unsplash.com/photo-1424819827928-55f0c8497861?fit=crop&w=600&h=600%27'}}
				// 사용설명서에 나와 있는 resizeMode 속성 값을 그대로 넣어 적용합니다
        resizeMode={"cover"}
        style={styles.imageStyle}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    //혹시 미리 궁금하신 분들을 위해 언급하자면,
    //justifyContent와 alignContent는 영역 안에 있는 콘텐츠들을 정렬합니다
    justifyContent:"center",
    alignContent:"center"
  },
  imageStyle: {
    width:"100%",
    height:"100%",
    alignItems:"center",
    justifyContent:"center"
  }
});
```

 

style : stylesheet는 한파일의 옷장으로 생각하면 된다. create은 그 안의 딕셔너리가 존재한다.

태그에 스타일을 주는 방식 또한 리액트 네이티브에서 제공하는 StyleSheet 기능을 가져와 적용합니다. 이 StyleSheet은 결국 객체(딕셔너리)를 하나 만드는데, 이쁜 옷들을 정리해 놓는 객체 입니다. 이 객체에 옷을 사용법 대로 생성한 다음 잘 정리해 두고, JSX 엘리먼트에서 사용 하면 됩니다.

-자주 사용하는 스타일 속성

-스타일 공식 문서

https://reactnative.dev/docs/style#docsNav

Style · React Native

https://reactnative.dev/docs/layout-props

Layout Props · React Native

또 다른 스타일을 알고 싶을 땐 구글에 " react native [필요한 스타일] " 이런식으로 검색해도 많은 레퍼런스를 찾을 수 있습니다.

import React from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.textContainer}>
        <Text style={styles.textStyle}>스파르타 코딩클럽!!</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    //영역을 잡는 속성입니다. 따로 자세히 다룹니다.
    //flex: 1은 전체 화면을 가져간다는 뜻입니다
    flex: 1,
    //영역의 배경 색을 결정합니다
    backgroundColor: '#fff',
    //아래 두 속성은 영역 안의 컨텐츠들의 배치를 결정합니다. 
    //flex를 자세히 다룰때 같이 자세히 다룹니다
    justifyContent:"center",
    alignContent:"center"
  },
  textContainer: {
    //영역의 바깥 공간 이격을 뜻합니다(하단 이미지 참조)
    margin:10,
    //영역 안의 컨텐츠 이격 공간을 뜻합니다(하단 이미지 참조)
    padding: 10,
    //테두리의 구부러짐을 결정합니다. 지금 보면 조금 둥글죠?
    borderRadius:10,
    //테두리의 두께를 결정합니다
    borderWidth:2,
    //테두리 색을 결정합니다
    borderColor:"#000",
    //테구리 스타일을 결정합니다. 실선은 solid 입니다
    borderStyle:"dotted",

  },
  textStyle: {
    //글자 색을 결정합니다. rgb, 값 이름, 색상코드 모두 가능합니다
    color:"red",
    //글자의 크기를 결정합니다
    fontSize:20,
    //글자의 두께를 결정합니다
    fontWeight:"700",
    //가로기준으로 글자의 위치를 결정합니다
    textAlign:"center"
  }
});

<flex> : 영역을 차지하는 속성입니다.상대적인 개념. 합의개념이라 생각하면 된다. flex를 1 로 설정하면 화면 전체를 가져가겠다는 뜻이다. 만약에 flex가 각각 1,2로 적용되어 있다면 flex숫자를 모두 합한 것을 분모로 하고 그 숫자들을 분자로 적용한다.1+2 = 3 인 각각 1/3 , 2/3영역을 갖게되는것이다.

flex는 상대적입니다. 가장 최상위의 container 스타일을 가져가는 View 엘리먼트는 디바이스 전체 화면의 영역을 가져갑니다. 안 쪽의 containerOne 스타일이 부여된 View 엘리먼트는 전체를 3등분한 뒤 1/3을 가져가고 containerTwo는 2/3를 가져갑니다. 즉, 같은 레벨의 엘리먼트들의 flex 합을 각자의 flex 속성값 대로 가져갑니다.

 

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

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.containerOne}>

      </View>
      <View style={styles.containerTwo}>
        <View style={styles.innerOne}>

        </View>
        <View style={styles.innerTwo}>

        </View>

      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex:1
  },
  containerOne: {
    flex:1,
    backgroundColor:"red"
  },
  containerTwo:{
    flex:2,
    backgroundColor:"yellow"
  },
  innerOne: {
    flex:1,
    backgroundColor:"blue"
  },
  innerTwo: {
    flex:4,
    backgroundColor:"orange"
  }
});

 containerTwo안 영역에 innerone,two영역이 안쪽에 자리잡고 있기 때문에 Two의 yellow는 보이지 않는다.

 

<flexDirection> : 자리 잡은 영역의 방향입니다.

노란색 영역에 넣었던 파랑,주황 영역이 세로에서 가로 방향으로 영역을 다시 잡은 모습을 확인 할 수 있습니다. 즉, row는 가로 방향, column은 세로방향으로 영역을 배치합니다. 기본 값은 column입니다.

<justifyContent>

justifyContent는 flexDirection과 동일한 방향으로 정렬하는 속성입니다 flexDirection: 'column'에서 justifyContent는 상하 정렬, flexDirection: 'row'에서 justifyContent는 좌우 정렬을 뜻합니다. flex-start(left영역의 왼쪽), center(가운데), flex-end(right영역의 오른쪽.컨텐츠가 아래가 붙는 이유는 flexdirection값이 column일 경우정렬방향이 위에서 아래이기 때문이다. ), space-between, space-around 속성을 가집니다.

space-between 과 space-around

innerOne,Two를 모두 감싸고 있는 containerTwo의 flexDirection 속성값을 변경하면서, innerTwo의 justifyContent 속성값을 이리저리 변경해보세요! 상위 엘리먼트 영역의 flexDirection을 따라서 컨텐츠 위치도 변경됨을 알 수 있습니다.

 

<alignItems>

Align Items는 Flex Direction과 수직한 방향(반대 방향이라고 생각하면 편합니다)으로 정렬하는 속성입니다. flexDirection: 'column'에서 alignItems는 좌우 정렬, flexDirection: 'row'에서 alignItems는 상하 정렬을 뜻합니다 flex-start, center, flex-end(column일때는 오른쪽으로적용), stretch 속성을 가집니다.

이것도 마찬가지고 innerTwo( 상위 엘리먼트 ) 에 적용을 해야 안에 있는 컨텐츠에 영향이 간다

 

 

모듈 : 자바스크립트를 다루면서 여러 자바스크립트 파일이 있을 경우, 서로 다른 자바스크립트 파일에서 각 파일에 있는 함수를 불러오거나, 자바스크립트 파일 자체를 불러올 때 사용하는 모듈 시스템.

모듈 시스템은, 화면을 그리는 함수 말고도 데이터를 다룰 때도 유용하게 사용됩니다.

import form과 관계가 있다.

//A.js 파일
//times, plusTwo 함수를 외부로 내보낼 준비를 합니다.
export function times(x) {
  return x * x;
}
export function plusTwo(number) {
  return number + 2;
}

//B.js 파일
//다른 자바스크립트 파일에서 다음과 같이 불러와 사용합니다.
import { times, plusTwo } from './util.js';
console.log(times(2));
console.log(plusTwo(3));

ex) A.js파일의export함수를  B.js util.js파일에서 함수를 꺼내서 사용할 수 있다.

export default function App() { ... }

리액트 네이티브, 즉 현재 만들고 있는 앱에서의 모듈 시스템은 어떠할까요? App.js를 다룰 때 이런 정의를 내린적이 있습니다. 1) 간단히는 App.js는 앱의 화면을 그려주는 커다란 함수입니다. 또는! 2) 자세히는 App.js는 리액트 네이티브 라이브러리 그리고 Expo에서 제공해주는 기능들을 사용하여 화면을 그려주는 커다란 함수입니다. 그리고 App.js는 모듈 시스템에 의해 내보내지고 있습니다.

즉, 화면을 그리는 함수(여기선 App()을 가르킵니다)가 내보내져서 어디선가 사용이 되며, 사용이 되는 것 즉 화면을 그리게 된다는 뜻입니다. 간단히 정리해보면, 우리가 만든 화면을 그리는 함수들은 리액트 네이티브로 전달되어(내보내져서 == export) 화면을 최종적으로 그린다는 것으로 이해하면 충분합니다.

 

데이터를 자바스크립트로 불러올때 사용하는 코드.

import data의 경우 ./data.json의 파일 전체

import data from './data.json';

./ ⇒ 현재 파일과 동일한 위치에서 불러올 파일을 찾는 코드

../ ⇒ 현재 파일이 위치한 폴더보다 상위 위치에서 불러올 파일을 찾는 코드

강의 초반에 cd .. 에 대해 다루었었죠? ..은 현재 위치한 폴더 뒤로가는 코드 였습니다 이렇게 어디에 위치한 파일인지 명시하고 불러온다음, data라는 이름으로 불러왔스니다. 파일 자체를 App.js로 불러오는 것이기 때문에, 원하는 변수명으로 불러올 수 있습니다.

 

한 줄 문법, map 같은 자바스크립트 문법은 {} 안에서 사용할 수 있습니다.

 let tip = data.tip;

data.tip은 그 파일안의 팁이라는 키 값을 가리킨다.

map은 리스트 안에 있는 요소 하나하나를 끝날 때까지 순차적으로 검색해 보면서 그 값을 내뱉는 태그 

제목부분. 중괄호에 들어가있는 이유 : 태그사이에 변수를 넣어야 할 때 사용.변수안에 있는 값이 밖으로 꺼내진다.

 return (<View style={styles.card} key={i}>

여기서 키라는 것은 JSX문법에서 여러가지 반복적인 태그를 돌려서 화면을 나타내는 경우에 반복적으로 나타내는 태그는 고유한 키값을 부여해야한다.

'이것' 아니면 '저것'과 같이 단순하게 선택사항이 두 가지 뿐이라면 if, else 구문은 다소 코드가 길어지는 감이 있을겁니다. 이럴때 아주 짧게 쓸 수 있는 자바스크립트 문법이 있어요! 바로 삼항 연산자 입니다. 리엑트 네이티브로 앱을 만들 때 가장 많이 사용되는 조건문입니다.

let result = 10 > 2 ? "참" : "거짓"

(기본 모습)
let result = 조건 ? 참일 때 : 거짓 일때

(예제)
let result = 10 == 9 ? true : false  // result <-- false 값 할당  
let result = 10 !== 9 ? true : false // result <-- true 값 할당  
let reuslt = 99 > 10 ? true : false // result <-- true 값 할당

10은 2보다 큰가요 작은가요? 당연히 크죠? 그럴땐 ? 물음표 뒤의 값이 result에 담겨지게 됩니다. 만약 앞의 10 > 2 부분의 조건이 거짓이게 된다면, : 콜론 뒤에 있는 값이 result에 담기게 되요! 이를 이용하면 {} 표현식 안에서도 간단히 조건문을 구성할 수 있습니다.