1일차 react-native 개발일지

1. 구성 요소는 함수형 또는 클래스형으로 생성할 수 있다.

 

 

2. 구성 요소의 이름 첫 글자는 대문자로 시작해야 한다.

   - 요소를 사용했을 때 에러 발생함

// 정상
const Head = () => {
	return (
             <View>
                  <Text> 헤더입니다. </Text>
             </View>
	)
}


// 에러
const head = () => {
	return (
             <View>
                  <Text> 헤더입니다. </Text>
             </View>
	)
}

 

 

 

3. StyleSheet에서 아래와 같은 용법은 에러 발생함. (객체 안에 또 다른 객체 생성)

  - 뭔가 비슷하게 사용하는 방법이 있을 것 같은데 아직은 잘 모르겠음.

// 정상
const styles = StyleSheet.create({
    common : {
        flex : 1
    }
)};


// 에러
const styles = StyleSheet.create({
    common : {
         header : {
             flex : 1
         }
    }
)};

 

 

 

4. 요소 style에 여러 개 적용 가능

  - 이런 식으로 적용 가능

const Header = () => {
	return (
		<View style={styles.common_01, styles.header}>
			<Head_01 />
		</View>
	)
}

 

 

 

5. StyleSheet는 CSS의 StyleSheet와 유사하다.

  - 어지간한 건 다 있음. 대신 react-native에서는 낙타 표기법(카멜 표기법)으로 사용한다.

    ( ex : css > text-align, react-native > textAlign )

 

  - StyleSheet 관련 문법, 사용 예를 잠깐 봤는데 좀 색다른 게 많아서 자주 사용해봐야 할 것 같다.

     > 사이트 : reactnative.dev/docs/stylesheet

 

 

---

 

 

어젯밤에 세팅하다가 졸고 오늘 점심에 일어나서 간단한 레이아웃만 잡았다.

 

당장은 익숙한 형태인 header랑 body로 만들었는데 이 간단한 거 하는데도 에러를 몇 번 봤는지 모르겠다.

 

옆에 예뮬레이터 띄워두니까 재밌긴 한데 뭔가 좀 답답하다. 아직 숙련도가 부족해서 그런 것 같다.

 

끗