스파르타코딩클럽 내일배움캠프 TIL44

리액트 네이티브

기본설명 및 설치방법

• 지금까지 리액트 라이브러리를 이용하여 브라우저에서 돌아가는 웹 어플리케이션을 만들었는데, 리액트 네이티브는 모바일 어플리케이션을 만드는 라이브러리이다.

• 리액트는 플랫폼에 구애 받지 않음 : 웹 + 모바일 둘다 사용 가능하다는 말

• packge.json 에 React-dom이 있을텐데 이것때문에 Web App 어플 개발이 가능

• React + React Native => 모바일 어플리케이션 개발 가능

• 리액트 네이티브 아키텍쳐
  

  • 옛날 방식
    - JSC 자바스크립트 엔진이 JS를 해석을 했다.
    - JSON 형식을 메세지를 만들어서 bridge를 통해 Native 사이드에 주고 받고 하였다.
    - shadow 쓰레드 : Yoga 라는 레이아웃 엔진 , 네이티브 사이드에서 플렉스 박스를 이해할 레이아웃 엔진이 필요하다.
    
  • 옛날 아키텍쳐 작동 원리 (비동기)
    - 어떤 이벤트가 발생하면 발생했다는 객체를 발생시킨다.
    - 객체를 제이슨으로 만들고 자바스크립트 사이드로 넘겨주고 제이슨을 파싱한다.
    - 자바스크립트에서 이벤트를 실행하고 자바스크립트가 이벤트를 계산한뒤
    - 객체로 만들고 제이슨으로 만들어서 네이티브 사이드로 보내준다.
    - 네이티브 사이드에서도 이벤트를 파싱하고 자바스크립트에서 실행한 것을 계산해 화면에 보여준다.
    
  • 최근 아키텍쳐(동기)
    • JSI 라는 중간인터페이스를 통해서 서로 주고받지 않고 JSI에서 해결한다.
    • 즉, 동기적으로 연결이 되어있다는 것이다. 편지를 주고받지않고 카카오톡 메세지를 주고받는 예가 있다.

• Expo 사용 방법

  • Expo 홈페이지에서 로그인 후 왼쪽카테고리에서 All create 클릭
  • new create 클릭
  • 제목설정하기
  • 터미널에서
    • npm install --global eas-cli 엔터
      💡 error 발생 > 해결 : sudo npm install --global ese-cli
    • npx create ... 엔터치기
    • eas init ... 터미널에 입력해서 expo 웹사이트에 연결, 배포할 수 있다.
    • 터미널에서 eas update expo에 작업한 것이 그대로 올라간다.

문법

• 대표적인 Components 는 총 6개이다. StyleSheet를 제외하면 5개라고 봐도 무방하다.
  • 다른 컴포넌트도 많다는 뜻
  • View, Text, Image, TextInput, ScrollView, StyleSheet
  • StyleSheet.create는 객체이고, CSS 명령어를 자동완성 해주는 기능을 제공해줘서 사용한다.

<View> : <div> 태그와 같다. 기본적으로 flex 박스이다. 
  // 기본 속성 - display : flex , flex-direction : column

<Text> : 글자를 쓸 때 반드시 감싸줘야한다.

<Image> : <img> 태그와 같다.
  // 사용방법(폴더에 이미지 파일이 있을 경우) : <Image source={require("경로")} /> , require는 노드에서 제공해주는 메서드이다.
  // 사용방법(폴더에 이미지 파일이 없을 경우) : <Image source={{uri:"경로"}} /> 

<TextInput> : <input> 태그와 같다.
  // 사용방법 : <TextInput style={{width: "100%", backgroundColor: "grey"}} value={text} onchangeText={setText} />

  // 이벤트 객체는 네이티브에서 제공하지 않는다.
const onChangeText = (text) => {
    setText(text);
};

<ScrollView> : 브라우저에서 기본적으로 내용이 화면을 벗어나면 스크롤이 생기지만 네이티브에서는 그렇지 않기 때문에 써줘야하는 컴포넌트이다.
<ScrollView> 의 스타일링은 차이점이 있다. style 속성이 아닌 contentContainerStyle 속성을 사용해야 한다.
사용방법 : <ScrollView contentContainerStyle={style.container}><Text>Hello</Text></ScrollView>

<View> 대신 <SafeAreaView> 컴포넌트를 사용하면 위에 노치 부분 밑에부터 화면이 출력된다.

• Styled Components 사용가능 하지만 Emotion/native 을 설치하고 사용하는 것이 더 좋다. (자동완성 기능 때문에)

• Button title 속성이 무조건 있어야 하고 title 속성은 버튼의 내용을 화면에 보여준다.

• onClick 속성 대신 onPress 를 사용한다.