ReactNative 공부 시작! (1)

React를 공부하던 중 앱 만들때 쓰는 ReactNative에 관심이 생겼다.
리액트나 RN이나 같은 리액트 기반이기도 하고, 리액트를 쪼끔 건드려봤으니 RN도 할 수 있겠다(?) 라는 생각으로 시작!
 
 
프로젝트 만들기
npx react-native@latest init 프로젝트명
 
리액트에서 쓰던 <div>가 RN에서는 <View> 같은 느낌
텍스트도 <Text>텍스트</Text>로 감싸줘야 한다.

스타일 지정할때는 기본적으로 Camel case를 사용
 
버튼 속성 + 클릭 이벤트 예시.

<Button title="버튼이름" onPress={()=>console.log('클릭!')}/>

 
 
RN에서의 flex는 기본적으로 flex-direction 컬럼이 기본값 ( display : flex 생략 가능)

RN에서의 navigation 설치법
npm add @react-navigation/native

CLI 사용중이므로
npm add react-native-screens react-native-safe-area-context

기본 네비게이션 설치

import android.os.Bundle;

    @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(null);
  }

스택 네비게이션 설치...

npm install @react-navigation/stack
npm install react-native-gesture-handler

// index.js나 App.js 최상단에 import
import './gesture-handler'; 

npm install @react-native-masked-view/masked-view

npx pod-install ios

하다가 오류가 많이 났다..

gesture-handler 경로 오류

공식 문서에서는
 
gesture-handler.native.js 파일과 gesture-handler.js 두개를 만들어주고
index.js나 App.js에 import './gesture-handler'; 를 import하라고 했지만 계속 오류가 났다
→ getsture-handler.native.js랑 gesture-handler.js 안 만들고 그냥 최상단에 import 했더니 해결됨. (뭐지?)
 
자세한건 공식 문서 참조,,
https://reactnavigation.org/docs/stack-navigator

Stack Navigator | React Navigation

 
 
StackNavigator 만들기
1. 스택을 createStackNavigator()를 이용해서 선언,
2. Stack.Navigator로 감싼 후
3. 그 안에 Stack.Screen으로 스크린들 포함시키기

<Stack.Navigator>
	<Stack.Screen />
</Stack.Navigator>

이런 형식도 가능

<Stack.Screen name="스크린 이름" component={스크린 컴포넌트 이름} />

* RN의 모든 화면 컴포넌트는 Navigation 이라는 probs가 전달됨
 
네비게이션 타이핑 (공식 문서 참조)

import { createStackNavigator } from '@react-navigation/stack';

const RootStack = createStackNavigator<RootStackParamList>();

 
 
드로우 네비게이션
https://reactnavigation.org/docs/drawer-navigator
 
ReactNative로 작업하고 있는데 처음부터 계속 줄바꿈, 공백, 들여쓰기 하나하나 오류가 뜨고 있었다.
실제 실행하는데는 지장이 없어서 무시하고 있었는데 계속 뜨니까 궁금해서 찾아봤다.
 
ReactNative는 코드 스타일 규칙과 코드 품질 검사를 엄격하게 적용하는 EsLint랑 Prettier같은 도구들이 있는데
얘네들이 코드 포맷이나, 규칙을 엄격하게 검사하고 오류나 경고를 계속 발생시킨다.....
 
React는 EsLint나 Prettier를 강제하지 않는다.. 하지만 RN은 성능이나 UI 일관성을 매.우 중요하게 생각해서 코드 스타일을 통일시키기 위해 계속 오류를 발생시킨다..
 
해결하려면.. 또 npm install.. install.. install.. 휴,,,
 
RootNavigator
메인 화면에서 로그인 성공하면 MainDrawerNavigator로 이동하고 아니면 AuthStackNavigator으로 가지게 하려고 하는데

function RootNavigator() {
  const isLoggedIn = true;

  return <> {isLoggedIn ? <MainDrawerNavigator /> : <AuthStackNavigator />} </>;
}

 
계속 <Text> 오류 발생..

 ERROR  Error: Text strings must be rendered within a <Text> component.

 
해결..

return <>{isLoggedIn ? <MainDrawerNavigator /> : <AuthStackNavigator />}</>;

 
return <> 뒤에 공백 하나때문에 빈 문자열(" ")을 넣은 것으로 취급해서 난 에러였다.. 까다로운 RN...