jsx 기본 문법

• 리턴(return)
  단순하게 생각하면 jsx 문법을 리턴 안에 쓰고 이거를 반환함으로서 화면밖에 표출이 된다.
  항상 () 로 감싸져 있고 ()안에는 태그가 놓여있는 형태

• <view>,<text>와 같이 꺽쇠로(태그) 쓰여져 있는 것들은 리액트 네이티브에서 jsx라고 부릅니다. 또 하나의 화면을 그리는 문법

• 엘리먼트
  <view>영역</view> 과 같이 닫는 태그로 온전히 화면의 한 영역을 구성할때
  jsx에서 엘리먼트라 부름

  엘리먼트는 =태그 =꺽세

모든 태그들은 리액트 네이티브라는 도구에서 꺼내와서 사용함

import{StyleSheet, Text, View} from 'rect-native'
//리액트 네이티브 에서 가져오기 from 'rect-native'

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>
);
}
//앞뒤로 꺽새가 있어야됨 명심!!

태그는 항상 닫는 태그와 자체적으로 닫는 태그를 구분해야함

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>//닫는 태그
 );
}

jsx문법의 가장 큰 규칙은 항상 최상위 태그(앨리먼트)가 있어야함

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>
  );
}// 리턴안에 최상위 태그 <View> 안에 <Text>,<StatusBar style="auto" /> 가 감싸져있음

으음 최상위태그

• 주석

  //JSX밖에서의 주석
   
  
  {/*
  JSX 문법 안에서의 주석
  				*/}  

코드의 영향을 주지않는 코드
리턴문 태그 안이냐 밖이냐에 따라 형태가 달라짐

앱 화면 만들기

• View, /View

화면의 영역(레이아웃)을 잡아주는 엘리먼트 App.js 상에서 View는 화면 전체 영역을 가진다

• Text

앱에 글을 작성하려면 반드시 사용해야하는 엘리먼트

View 엘리먼트 안에서 문자를 작성하면 오류가 발생

• ScrollView

앱 화면을 벗어나는 영역의 경우 ScrollView 엘리먼트로 감싸면 스크롤이 가능해지면서

모든 컨텐츠를 볼 수 있음

• button

인터렉티브한 기능이 나타나는 태그이지만
원하는곳에 배치 하기가 어렵고 스타일링 주기가 어려움

• TouchableOpacity

button태그 와 기능은 똑같지만 스타일링에 대해 자유도가 높다

• 이미지 태그 (내.외부)
  내부 :상대주소를 통해서 ASSETS폴더에 있는 이미지를 가지고 와서 사용할수있음

외부: 외부 주소를 연결할때에는 uri key 값에 주소를 넣어서 사용할수 있음

• StyleSheet

<margin>과 <padding>은 영역의 바깥과 안의 여백을 결정합니다.

• Flex
  영역을 차지하는 속성 (상대적인 개념)
  앱 화면을 구성 할때 가장 중요!!
  영역의 레이아웃을 결정
  <flex>는 위치한 곳의 영역을 같은 레벨의 <flex>합 비율대로 가져감!!!

• flexDirection

자리 잡은 영역의 방향

<row>는 가로 방향
<column>은 세로방향

기본 값 <column>

• justifyContent

<justifyContent>는 <flexDirection>과 동일한 방향으로 정렬하는 속성

flexDirection: 'column'//에서 justifyContent//는 상하 정렬, 
flexDirection: 'row'//에서 justifyContent//는 좌우 정렬을

<flex-start>, <center>, <flex-end>, <space-between>, <space-around> 속성

• justifyContent

<Align Items>는 <Flex Direction>과 반대 방향으로 정렬

flexDirection: 'column'//에서 alignItems//는 좌우 정렬 
flexDirection: 'row'//에서 alignItems//는 상하 정렬

<flex-start, center, flex-end, stretch> 속성을 가짐

데이터 반복문 돌려보기

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

삼항 연산자

<?:> =<if,else>

예/ <let result = 4 > 8 ? "참" : "거짓">
예/ (let result = 11 < 1 ?"참" : "거짓">

드디어 끝.

2주차는 끝.. 마무리는 역시 숙제 본인의 소개 페이지 만들기!

저!!! 그런거 필요없는데요 흑흑 제일 오류가 많았던 2주차 ..

생각해보면 수업을 못따라가는..것도맞을듯...아니라 우리집 똥터넷 문제 ㅜㅜ 2주차 동안 설치기사분들만 3일 연속 뵙고 왔다 가시면 내내 전화통화... "왜. 안되죠..? "2주차 끝무렵즘 인터넷 문제를 다 잡고 나니 오류가 확실히 안뜬다고는 못하겠고 거의 안뜸 정말정말정말!!

이제 3주차를 앞두고 있는데 이상태로라면 친구 + 즉문즉답 도움으로 오류도 열심히 뚫고 완강할수있지않겠어?! (그치만 !! 역시 난 코딩은 아닝거야 분명해 ㅜㅜ)