React Native - 1. 초반 설정 및 핵심 컴포넌트

초반 설정

1. npm install -g expo-cli 를 통해 global에서 expo cli를 설치한다.

2. expo init <프로젝트이름> --npm 을 이용해 프로젝트를 초기화한다 (--npm 안하면 yarn으로 패키지관리)

3. android studio에서 AVD (androdi virtual device) 를 생성하고 실행한다. 

- configure > AVD Manager > Create Virtual Device > System image는 Pie 선택 후 생성

4. npm run android를 통해 안드로이드 앱에서 RN을 실행시킨다. 

- 이 때 웹에서 화면이 자동으로 띄워지고, AVD에 앱이 설치되지 않은 경우 앱이 설치되고 실행된다.

 

잘 실행된 경우

잘 실행된 경우 AVD

 

View

안드로이드와 ios에서 View는 스크린의 작은 사각형 element로 text를 보여주는데 사용되는 요소이다. 아주 작은 요소들도 하나 하나 View이다. 어떤 View는 다른 view를 포함할 수 있다.

 

Text

View 내에서 Text를 보여줄때 사용하며, style과 event를 지정할 수 있다.

 

ScrollView

Scroll이 가능한 View이다. 페이지가 길어지는 경우 스크롤 할 수 있게 ScrollView로 감싸주면 된다. 

 

FlatList

ScrollView에서 map을 통해 여러 컴포넌트를 나열할 수 있지만, 처음 Render 할 때 보이지 않는 것 까지 Render 해준다. FlatList를 사용하면 보이지 않는 것은 렌더링을 하지 않아 매우 효율적이다.  

key를 설정해줄 땐 map을 이용할 떄와는 달리, keyExtractor 라는 prop에 함수를 전달해서 특정 key를 전달하게끔 해야한다.

 

Touchable

웹과는 다르게 앱은 이벤트를 달아줄 수 있는 컴포넌트가 정해져 있다. Button과 Touchable이 그 중 하나이다. 버튼은 버튼을 만들기 위해 사용되는 반면, Touchable은 어떠한 컴포넌트를 감싸면 그 안의 컴포넌트에 대해 이벤트를 지정해 줄 수 있다. 

 

TouchableWithoutFeedback

Touch 한 대상의 Opacity가 변하지 않는 Touchable이다. 주로 default action들을 적용해줄 때 사용된다.

ex) keyboard 내리기 (keyboard.dismiss())