리엑트 네이티브

• attribute = props = {} <- 로 표시
• jsx는 xml안에서 ' ' 를 이용한 String 뿐만아니라, 다양한 것들(object, javascript 값 등)을 사용할 수 있으며 그것을 구분하기 위해 jsx테그안에서 { }사용 
• 리엑트: JSX -> REAT(Virtual DOM) -> HTML(VIEW) JSX를 HTML로 렌더링
• 리엑트 네이트브 : JSX -> REACT NATIVE(Vitual DOM) -> ANDROID or iOS view JSX를 네이티브 뷰 형태로 렌더링
• 즉, JSX를 통해 어떤 뷰로 렌더링 하는 것! 이 핵심
• 데이터 처리는 자바스크립트가 수행하고 뷰와 자바스크립트 엔진을 연결하는 브릿지(Bridge)가 존재
• Javascript Engine(DATA) <-> Bridge <-> Native View
• 리엑트 네이티브는 Bridge를 다루는 것에 중점을 두고 있다. 
• https://reactnative.dev/docs/environment-setup

React Native · A framework for building native apps using React

• https://snack.expo.io/

Snack - React Native in the browser

• 위사이트를 통해 웹에서 간단하게 개발 가능
• App.js <- entry point, 'lodash'<- npm 설치
• 리엑트네이티브의 특성
  • <View> 에 styles를 먹일 수 없다. 
  • flex속성은 기본으로 제공되며 필수 요소 아래의 링크로 공부 할 수 있다.
  • https://flexboxfroggy.com/#ko

Flexbox Froggy

• View
  • SafeAreaView - 센서(노치)가 있는 경우 노치를 제외한 부분에 여백을 주고 표현하게된다.
• flex속성을 잘 이용하면 정렬이 쉽다! 
  • flex 1 과 hieght 100%는 같아보임
  • flex = 1 은 flex-grow : 1 과 같다. 즉, flex는 flex-grow의 축약속성
  • flex 1 이라는 속성을 2개의 컨테이너가 같게되면.0.5, 0.5씩 같게된다. 즉, 서로 1만큼의 공간을 공유하게 되는 것
  • https://developer.mozilla.org/ko/docs/Web/CSS/flex-grow

flex-grow

• React는 항상 컨테이너가 존재해야하는데, 그것에대한 부담으로 React.Fragment라는 추상 컨테이너를 사용 할 수 있다.
  • <> ... </> 이런식으로
• 안드로이드의 경우 states bar의 픽셀을 고려해서 paddingTop을 주는 것이 포인트 
  • paddingTop: Constants.statusBarHeight, 을 이용하면 된다.
• view와 같이 jsx부분은 native화 되면서 각 디바이스 OS의 소스와 맵핑되지만, lodash같은 자바스크립트 펑션들은 엔진위에서 자바스크립트로 돌아가기 떄문에 구동 시 native로 변화면서 생기는 문제에대해 고려안해도된다
• 리엑트의 특성중 state가 중요한 것은, 이것의 변경이 됐느냐 안됐느냐를 파악하여 상태를 가져가기 때문
• 또한, state라는 개념을 분리 시킨 덕분에, 상태의 변경이 이뤄져도 전체 하면을 다시 렌더링 하지않고 state만 렌더링할 수 있다. 
• 즉, 변경될 수 있는 state를 설정하여 dom이 state를 바라보면서 해당 state의 상태만 변경 시켜 줄 수 있다
• 스타일 사용 시, 아래의 styled-component를 많이 사용

https://styled-components.com/

styled-components

• 'styled-components/native'; //styled-components<-- web용 뒤에 '/native'를 붙이면  <-native용
  • const Row = styled.View``; <- back-tick을 사용해야함(~아래의...)
  • styled-components를 사용 할 경우, 기존에 react에서 style 지정 시, json 형식을 사용해야하는 불편함을 덜어 버릴 수 있다. CSS형식으로 컴포넌트 지정이 가능한 것
  • 예를들어

const styles = StyleSheet.create({

ball:{

    width : 50,

    height : 50,

    backgroundColor : '#e5e5e5',

    borderRadius : 25,

    justifyContent : 'center',

    alignItems : 'center',

}) 

 

위와 같이 선언 된 기존의 리엑트 스타일 문법은 JSON 형식으로 String, 아니면 숫자 형식으로만 배치가 돼며, camelCase 형태로 변환해줘야한다.

그러나 styled-component를 사용할 경우

 

const Ball = styled.View`

  width : 50px;

  height : 50px;

  border-radius : 25px;

  background : #e5e5e5;

  align-items : center;

  justify-content : center;

  `;

위와 같이 기존 css문법을 그대로 사용 가능하다. 이것은 Templat_literals라는 방법을 이용하는 것이다.

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals

Template literals

• 또한, ${ } <- 이용해 변수를 선언 해 줄 수 있다.
• 아래의 예시를 보면 

container:{

    paddingTop: Constants.statusBarHeight,

   }

 

위와 같은 형식에서

const container =   styled.View`

  padding-top:${Constants.statusBarHeight}px;

`;

이렇게 변수 선언을 통해 값 입력 가능.

• 또한 props를 이용해서, style을 각각 적용할 수 있는데
•  background : ${props => props.color}; 이런식의 선언으로 각 테그안의 color 설정 변경이 가능하다
• 또한 화살표 기능을 통해 조건 추가도 된다.
• 아래의 방식처럼 props*(속성)을 이용해, Ball이라고 선언된 테그의 value의 조건에따라 background-color를 지정 가능하다.

const Ball = styled.View`

  background : ${props => {

    if(props.value < 11){

      return '#e5e251'

    }else if(props.value < 21){

      return '#517FF5'

    }else if(props.value < 31){

      return '#E54036'

    }else if(props.value < 41){

      return '#e5e5e5'

    }else{

      return '#43BF74' 

    }

  }};