React Native 완전 기초 알아두기

React Native 함수형 컴포넌트

• 리액트 네이티브는 리액트 네이티브 컴포넌트를 반환화는 함수로 구성
• 이 때 반환하는 컴포넌트는 하나의 노드로 구성
• 야러 노드로 된 컴포넌트를 반환하려면 Fragment 컴포논트로 감싸서 반환
• Fragment 대신에 <></>의 Fragment 단축 문법 사용 가능
  ex)
  => 에러

const App = () => {
  return (
    <View></View>
    <View></View>
  )
}

=> 정상1

const App = () => {
  return (
    <Fragment>    
      <View></View>
      <View></View>
    </Fragment>
  )
}

=> 정상2

const App = () => {
  return (
    <>    
      <View></View>
      <View></View>
    </>
  )
}

• 리액트 네이티브에서의 화면 디자인은 html에서 인라인 스타일과 유사

스타일링

스타일을 사용하는 방법

• StyleSheet.creat 함수를 사용하여 스타일 객체를 만든 후
  스타일을 적용하고 싶은 부분에서 와 같이
  스타일 객체를 할당하는 방법

• 직접 스타일 객체를 인라인으로 넣는 방법

• StyleSheet를 사용하면 반복되는 스타일을 관리 할 수 있다

• 인라인 스타일을 사용하면 컴포넌트 함수에서 변수값을 확인하고 동적으로 스타일을 적용 할 수 있다
  ex)

    <Text style={{color: error ? 'red' : 'blue'}}>Text</Text>

• 웹개발의 css와 유사한 문법 사용

• css에서 사용하는 거의 모든 요소를 사용 할 수 있다.

• css에서 사용되는 요소를 카멜 표기법을 사용하야 표기