20221229 리액트 네이티브 시작!

React Native)

• 리액트로 모바일앱을 만들 수 있는 프레임워크
• 리액트로 android, ios 네이티브앱을 동시에 만들 수 있는 크로스플랫폼

 

React Native 시작하는 방법 Expo Go & CLI)

✅ Expo Go - setup이 쉽고 초기개발이 빠름 + 윈도우에서도 ios 개발이 가능 / 대신 Native 코드 수정은 불가능

🟩 CLI - 모든 React Native를 위한 인프라를 직접 설치 / 대신 Native 코드 직접 수정이 가능

 

Expo로 React Native 시작)

1. expo.dev 에 로그인 후 왼쪽의 create project 

2. 프로젝트 설치하는 명령어 npx create-expo-app <프로젝트 폴더명>

+) npm install --global eas-cli 로 eas 명령어 설치 필요

# Create a new Expo project
# Initialize an Expo codebase on your machine with Expo CLI:

npm install --global eas-cli
# eas(expo app service) 명령어를 사용하려면 eas-cli 패키지를 global로 설치해야 함

npx create-expo-app rn-lecture-basic
# (yarn으로도 가능!) rn-lecture-basic이라는 이름으로 프로젝트 생성

eas init --id 11aec5c5-10bb-4c4a-af42-ea813cb069a3
# github의 레포지토리 같은 공간과 로컬 프로젝트를 연결해줌

# Link an existing Expo codebase

npm install --global eas-cli
eas init --id 11aec5c5-10bb-4c4a-af42-ea813cb069a3

명령어 npm install --global eas-cli 와 npx create-expo-app rn-lecture-basic 를 입력 후 프로젝트 폴더가 설치되면,

3. package.json 파일로 가서 명령어를 확인함!

"start" : "expo start" - 시작 명령어 : expo start

그럼 이렇게 QR코드가 뜬다

expo 어플을 깔고 컴퓨터와 같은 와이파이로 QR코드로 접속하면

이런 화면이 뜬다! 그럼 접속 성공:)

 

4. 이후 로컬 프로젝트와 expo를 연결하기 위해 명령어를 입력

eas init --id 11aec5c5-10bb-4c4a-af42-ea813cb069a3
# exp의 github 레포지토리 같은 공간과 로컬 프로젝트를 연결해줌

 

+) 배포하는(expo에 올리는) 명령어

expo update

githup에는 git push origin <올리는사람>이 되어야 하는데, expo에서는 expo update 명령어만 입력해도 됨

 

 

React Native 주요 UI 컴포넌트)

※ 주의

• 웹: <div>텍스트</div> (Ok)
• 앱: <View>텍스트</View> (Not Ok) >> <View><Text>텍스트</Text></View> (Ok)

 

React Native로 Todo-list UI 구현하기)

View

- 웹에서는 div

- div는 import 할 필요가 없지만 View는 react-native 라이브러리에서 import 받아와야 함!!

- 기본적으로 flexBox라서, display: "flex" 코드를 추가할 필요가 없음

- 모바일에선 flex-direction이 기본적으로 column

 

Text

- 텍스트를 쓸 때 반드시 필요함

 

TextInput

- 웹에서의 Input 태그

 

웹에서는 이벤트핸들러event handler로 onChange를 썼지만 리액트네이티브에선 onChangeText라고 써줘야 함!

- ex. onChangeText={ ... }

 

Image

- 웹에서는 <img src=" ... ">로 이미지를 불러왔다면,

- 모바일에서는 로컬이미지를 불러올 경우 <Image source={require(" ... ")}>

- 웹이미지를 불러올 경우 <Imag  source={{uri : " ... "}}> 로 사용한다 (url이 아니고 uri)

- style={{ width: 50, height: 50 }} 과 같이 style 속성을 넣어줘야 함!

 

ScrollView

- 리액트네이티브에선 화면스크롤을 하려면 무조건 ScrollView를 사용해야 함

- ScrollView에는 style 대신 contentContainerStyle={{ ... }} 사용

return (
    <ScrollView contentContainerStyle={{ backgroundColor: "grey" }}>
      <Text style={{ fontSize: 30 }}>hello</Text>

      <StatusBar style="auto" />
    </ScrollView>
  );

 

SafeAreaView

- ScrollView를 사용하면 폰 상단의 노치부분까지 컴포넌트가 보임!!

- SafeAreaView를 사용하면 컴포넌트가 노치부분 밑으로 적용됨

 

Expo에서 useState 사용)

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View, TextInput } from "react-native";
import { useState } from "react";

export default function App() {
  const [text, setText] = useState("");
  console.log("text :", text);
  // input div에 텍스트가 추가될때마다 콘솔에 출력되는 걸 확인 가능
  
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <TextInput
        onChangeText={setText} // 이렇게 사용
        value={text}
        style={{ width: "100%", backgroundColor: "grey" }}
      />
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

↓ 웹에서는 이렇게 event 객체를 이용하지만 ↓

const onChangeText = (e) => {
	setText(e.target.value)
}

↓ 앱에서 함수를 만들 거라면 이렇게 사용하기 ↓

export default function App() {
  const [text, setText] = useState("");
  
  const onChangeText = (text) => {
    setText(text)
  } // 함수 선언하고
  
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <TextInput
        onChangeText={onChangeText} // 이렇게 사용!!
        value={text}
        style={{ width: "100%", backgroundColor: "grey" }}
      />
      <StatusBar style="auto" />
    </View>
  );
}

 

 

스타일링 방법)

- inline styling

<TextInput style={{ width: "100%", backgroundColor: "grey" }}/>

 

- StyleSheet 를 쓰면 자동완성 가능

vscode에서 제공하는 자동완성

react-native에서 제공하는 자동완성

import { StatusBar } from "expo-status-bar";
import {SafeAreaView, Text, View, StyleSheet} from "react-native";
import { useState } from "react";

export default function App() {

  return (
    <SafeAreaView>
      <Text style={styles.wrapper}>hello</Text>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  wrapper: {
    fontSize:100
  }
})

 

- Styled Component

https://emotion.sh/docs/@emotion/native

Emotion – @emotion/native

자동완성이 돼서 리액트 네이티브에서 Styled Component를 사용할 땐 emotion 라이브러리 쓰는게 좋음

# 둘 중 하나만 하면 됨!!
npm install @emotion/react @emotion/native
yarn add @emotion/react @emotion/native

Styled Component를 사용할 경우, styled 객체 안에 이미 Text라는 Property가 존재하기 때문에 import 할 필요가 없음!!

import {SafeAreaView, View, StyleSheet} from "react-native";
import styled from "@emotion/native";

const StyledText=styled.Text`font-size: 50px;`

const StyledButton = styled.Button ``

export default function App() {
  return (
    <SafeAreaView>
      <StyledText>hello</StyledText>
      <StyledButton onPress={ ... } title='샘플버튼'/>
    </SafeAreaView>
  );
}

ㄴ 백틱(``)에서 자동완성이 되는 이유는 vsxode-styled-component라는 확장프로그램 때문이고, props에서 자동완성이 되는 건 emotion 라이브러리를 사용했기 때문

ㄴ 모바일에선 onClick 대신 onPress

 

- Tailwind

부트스트랩이랑 사용법이 비슷함

https://www.nativewind.dev/quick-starts/expo

Expo | NativeWind

 

import React from "react";
import { Text, View } from "react-native";

const App = () => (
  <View className="mt-10 flex-1">
    <Text>React Native</Text>
  </View>
);

 

 

Problem Check)

1. 프로젝트 설치 단계인 npx create-expo-app rn-lecture-basic 명령어 입력 후에 이런 오류가 발생했다

node_modules폴더가 설치되지 않아 프로젝트폴더를 삭제한 후 재설치를 한 것이다 보니, 설치 경로가 ../react-native-lecture로 되어 있어야 하는데 그대로 ../react-native-lecture/rn-lecture-basic 로 되어있었음ㅠㅋㅋㅋㅋㅋ 이미 날려버린 경로에 설치하려고 하니까 에러가 뜨지;

앞으로의 무궁한 발전을 위해 아주 기초적인 부분에서 실수한 흑역사 하나를 박제한다..😂

 

2.  흑역사2ㅋㅋㅋ code . 로 vscode 실행 후 expo start 를 했는데 아래와 같은 오류문구가 떴다

컴퓨터언어의 가장 큰 장벽은 역시 영어베이스의 언어라는 것 아닐까

저 컴퓨터 특유의 레트로폰트는 구시대 블루스크린이 상기시켜 사람을 당황하게 만드는 재주가 있다. 그래서 요즘 블루스크린은 좀 만만해 보임..

어쨌든 이것도 한참을 북치고 장구치고 했는데 결국 경로 문제였음

 

3. Image 컴포넌트

html, css에서는 style 속성이 없어도 이미지가 화면에 뜨는데, 리액트 네이티브에선 style 속성으로 가로세로를 지정해 줘야 이미지가 화면에 떴다. 여기서 이십분 헤맸는데ㅠㅠㅋㅋㅋㅋ

 

4. style 속성 오류로 Expo go 어플 중단..

아까까지 멀쩡히 잘 구동되던 어플이 갑자기 종료돼서 터미널에 expo start 재입력과 애꿎은 어플 캐시삭제, 데이터삭제, 강제종료 및 삭제 후 재설치를 반복했다. 여기서 또 이십분을 날림ㅠ기력 다 빨리고 망연하게 앉아서 강의만 듣다가 혹시...?하는 생각에 style 설정에서 큰따옴표를 지우자마자 어플이 다시 멀쩡히 구동됐음🤣

다음에는 실수하지 말기!!

style={{ width: "50", height: "50" }} // 이러면 오류 발생!!!!
style={{ width: 50, height: 50 }}
style={{ width: "50px", height: "50px" }}

 

5. 갤럭시 s22 울트라 기준 SafeAreaView 태그

현재 사용하는 폰이 울트라22인데 구글링해보니 '노치 디자인을 적용하지 않은 채 상단 정중앙에 전면 카메라를 위한 공간을 구멍으로 뚫어버리고 나머지는 전부 디스플레이로 할당하는 디자인을 적용' 이라고 나오긴 한다..ㅋㅋㅋㅋ

강의에서 사용한 폰은 아이폰이었는데, 아이폰과 갤럭시의 차이인 건지 아니면 울트라22가 노치디자인이 아니어서 그런건지, SafeAreaView를 적용해도 상단의 상태표시줄까지 스크롤이 그대로 적용됐다.

강의에서 나도 모르는 사이에 <StatusBar> 컴포넌트가 지워진 건지 확인해 봤지만 <StatusBar> 컴포넌트를 포함한 코드였음ㅠ

프로젝트가 시작되면 갤럭시를 포함한 모든 폰에서 상단바 영역을 침범하지 않는 방법을 강구해야 할 것 같다..