<View style={styles.container}> </ 여기 하나의 부모로 감싸져 있은. />
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>

와 비슷한 기능

view처럼 특정 역할을 하는 컴포넌트로 감싸지 않고 여러개의 컴포넌트로 반환하고 싶은 경우

로 감싸준다 ← <> </> 라는 단축문법 사용가능

변수

return 앞에 변수 사용 가능

조건문

jsx내에서 if문을 실행 할 경우, 즉시실행함수 형태로 작성되어야한다.

{(() => {
        if (name === 'Hanbit') return 'my name is hanbit';
        else if (name ==='beomjun') return 'my name is beomjun';
        else return 'my name is nothing';
      })()}

이런식으로 사용 가능... but 지금 문법 이해안감 ^^,,

삼항 연산자 역시 사용 가능

<Text style={styles.Text}>
        My name is {name === 'beomjun' ? 'Beomjun Kim' : 'noting'}
      </Text>

and or

특정 조건에 때라 컴포넌트의 렌더링 여부를 결정할 수 있다.

false는 렌더링 되지 않기 때문에 and연산자 앞이 참이면 렌더링, or연산자 앞이 거짓이면 렌더링

null, undefined

null은 허용하지만 undefined는 오류가 발생함. return null; 해야함.

주석

/**/ 태그안

태그 밖: {/**/}

스타일링 p72

인라인 스타일링

style에 문자열로 입력하는 것이 아니라 객체 형태로 입력. 하이펀으로 연결된 이름은 하이픈을 제거하고 카멜표기법 사용

<View
	style={{
		flex: 1,
		backgoundColor: '#fff',
	}}
>
	<Text> dfsf </Text>
</View>

컴포넌트

button component

<View
      style={{
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <Text style={{ fontSize: 30, marginBottom: 10 }}>Button Component</Text>
      <Button title="Button" onPress={() => alert('Click !!!')} />
    </View><Text style={{ fontSize: 30, marginBottom: 10 }}>Button Component</Text>
<Button title="Button" onPress={() => alert('Click !!!')} />
</View>

버튼 컴포넌트 텍스트 밑에 button 파란색 글자로 생성 됨. 누르면 alert 가 click it! 뜬다.

안드로이드의 경우, 파란색으로 글자 표시가 아니라 배경색으로 노출.

props & state

props : 부모 컴포넌트에서 받은 값으로 변경 불가

state: 컴포넌트 내부에서 생성되고 값을 변경할 수 있으면 이를 이용해 컴포넌트 상태 관리

→ 상태를 관리하는 변수, 변수를 변경할 수 있는 세터 함수를 배열로 반환한다

event

버튼 만들때 사용하는 TouchableOpacity 커뮤ㅗ넌트에서 설정할 수 있는 press 이벤트의 종류는 총 4가지 : p95

onPressIn

onPressOut

onPress

onLongPress ← delayLongPress의 값을 조절 가능 = 3000으로 설정되면 3초이상 누르고 있어야 onLong{ress가 호출된다.

in → out → press

in → long→ out 둘 중 하나가 호출됨

onpress 와 onLongPress는 클릭시간에 따라 둘 중 하나만 호출됨.

change 이벤트 : 변화를 감지. 값을 입력하는 textinput에 많이 사용된다.