React Native 101

React-Native Offical Document

Expo CLI vs React Native CLI

리액트 네이티브는 아래 2가지 방법으로 개발할 수 있다.

• Expo CLI
• React Native CLI

1. Expo CLI

리액트 네이티브 개발을 쉽게 할 수 있는 툴로 리액트 네이티브를 위한 set-up이 미리 구성되어 있다. native 파일들을 사용자에게서 숨계놓고, 알아서 관리해준다.

👍 장점

• set-up이 미미 구성되어있어 개발을 시작하기 편하다.
• 처음 배포 후 업데이트 버전은 Expo에 publish만 해주면되서 배포하기 매우 편리하다.
• React Native에는 없는 기능을 Expo에서 따로 제공한다.

👎 단점

• Expo에서 제공하는 API만 사용 가능하다. => 모듈 사용불가
• native 파일을 크게 제어할 수 없다.

2. React Native CLI

툴없이 리액트 네이티브만으로 개발하는 방법으로 android studio 와 xcode를 모두 설치하여 이뮬레이션을 사용하는 방법이다.

👍 장점

• 다양한 Third-party Libaray를 사용할 수 있다.
• 네이티브 파일, 모듈 제어 가능

👎 단점

• Expo에 비해 편리하지 않고 기본 제공 기능들이 적음
• 사용자 설정이 필요하며 android studio ,xcode를 모두 설치하여 빌드 배포해야함

초기 React-Native 팀은 다양한 컴포넌트와 API를 제공하였으나 버그문제로 제공하는 기능의 수를 줄이고 주요 기능에만 집중했다.

---

React Native Start

아래와 같이 프로젝트를 생성한다.

$ npx react-native init ProjectName 

Error! <cli.init is not a function>
Solution : 새버전인 0.69.0에서 발생하는 에러로 npx react-native init ProjectName --version 0.68.2로 수정한다.

---

React Native

모바일 앱에서는 레이아웃에 width와 height를 거의 사용하지 않음 (반응형 땜시)

• view : div 같은 상자, 기본적으로 Flex Container로 구성되어 있다. (default: flexDirection: colum) * 부모는 항상 flex값을 가져야 자식도 적용가능
• text : 글자...모든 글자는 text 컴포넌트 안에 들어가야함
• style : 스타일 (일부 스타일은 사용할 수 없음 ex. border)
• StyleSheet.create({css}) 는 css 오브젝트를 만들때 사용 !object이므로 자바스크립트처럼 작성한다. 그냥 오브젝트로 사용할 수도 있지만 그럴 경우 자동완성 기능은 지원하지 않음

ScrollView

View 와 달리 ScrollView는 flex가 적용되지않는다. (자동으로 자식 길이 만큼 늘어나고 자식 또한 flex를 사용할 수 없음)

• *horizion 옵션을 주면 가로로 스크롤이 가능하다. (자세한 내용 공식 API 참고하기,,)
• pagingEnable 옵션을 주면 item 사이즈 만큼만 스크롤이 가능함

---

Dimensions

ScrollView 를 사용하는 컴포넌트에서 item이 전체화면 길이여야 한다면 어떻게 해야할까? 이때, 사용하는 것이 Dimensions 이다.

const { width: SCREEN_WIDTH } = Dimensions.get("window");

  

const styles = StyleSheet.create({
	....
	day: {
	
		width: SCREEN_WIDTH,
	
		alignItems: "center",
	
	},
	...

});

---

TouchableOpacity

터치 이벤트가 발생할 준비가 된 박스? View와 비슷하다. opacity가 들어간 이유는 애니메이션 효과가 있기때문이다.

TouchableHighlight

TouchableOpacity 와 비슷하지만 터치시 뒤에 배경화면을 지정할 수 있다는 점이 다르다.

TouchableWithoutFeedback

터치는 가능하나 UI에 다른 변화가 없는 박스이다.

Pressable

위 TouchableWithoutFeedback과 비슷해보지만 최근에 나온 기능으로 터치에 대한 더 자세한 설정이 가능하다.

🔖 참고한 문서
프린스송님의 리액트 설치방법 비교글

실무에서 RN 프로젝트를 하기전 많은 도움이 됐다.