[React Native] Simulator 구동 및 복습(App.js, Import, 컴포넌트)

 

 

알림

 

본 포스팅은 공부 목적으로 작성된 글이며 상업적 목적으로 절대 사용되지 않았음을 밝힙니다.

 

iOS 시뮬레이터, 안드로이드 시뮬레이터 구동하기

 

리액트 네이티브에서 iOS 시뮬레이터와 안드로이드 시뮬레이터로 구동하기 위해서는,

 

react-native run-ios # iOS 시뮬레이터 구동
react-native run-android # 안드로이드 시뮬레이터 구동

 

다음과 같은 명령어를 터미널에 입력해주면 됩니다. 현재 저는 iOS 시뮬레이터는 잘 구동이 되는데, 안드로이드 시뮬레이터의 경우 에러가 발생하여 구동이 되지 않습니다. 구글에 검색해 본 결과, gradlew clean을 해 주면 될 것 같은데요. 그렇게 하면 자바 경로가 잘못 되었다는 에러가 뜹니다.

 

이처럼 보통 인터넷 강의로 개발을 배울 때는 늘 개발 환경 세팅할 때가 가장 오래 걸리는 것을 알 수 있습니다. 왜냐하면 수강생들의 개발 환경도 다르고, 그 강의가 2~3년 전에 나온 강의라고 하면, 그 사이에 많은 업데이트가 이뤄져 있는 경우가 많기 때문입니다. 더군다나 M1 환경은 기존 맥북에서 환경 세팅 하는 것보다 더 잦은 에러가 발생하는데요. 지금의 저처럼 늘 에러가 꼬리의 꼬리를 물어 발생하는데, 어쩔 수 없는 개발자의 숙명 같습니다.

 

아무튼 당장 에러 해결 못 한다고 개발을 못 하는 게 아니라 일단 진도는 빼고 있는데요. 기껏 리액트 네이티브를 공부하면서, iOS 시뮬레이터에서만 개발하고 있는 게 민망할 따름이네요..

 

App.js

 

App.js

흰색 테두리를 먼저 보시면,

 

class App extends Component { render() { return () } }

 

App.js 파일에서, App 클래스의 return () 안에 작성하면 됩니다.

 

참고로 App과 같이 클래스형 컴포넌트는 render() 메서드가 꼭 있어야 하며, 렌더링 하고 싶은 JSX를 반환하면 된다고 합니다.

(지식 출처: https://react.vlpt.us/basic/24-class-component.html)

 

Import

 

Import

 

리액트를 해 보신 분들이라면 익숙학실 텐데요. 아니 리액트뿐 아니라, CSS나 자바스크립트 경로 지정이나 공통으로 쓰이는 파일을 include 해 오는 것과 같은 맥락이라 이해하시면 될 것 같습니다. 리액트 네이티브에서 View나 Text 같이 기본 태그들을 리액트 네이티브 모듈로부터 import 해 오거나, 다른 파일에서 작성한 컴포넌트들을 import 해 오면 됩니다.

 

기본 컴포넌트: View, Text

 

View, Text

 

View는 모든 컴포넌트들을 감싸주는 역할로, 가장 기본 단위라고 생각하시면 됩니다. 이미지의 왼쪽 코드와 오른쪽 시뮬레이터를 보시면, 가장 바깥쪽에 초록색 테두리인 View가 다른 컴포넌트들을 감싸주고 있는데, 이처럼 사용하는 용도입니다.

 

그리고 두 번째 노란색 테두리를 보시면, 'Content'라는 텍스트를 Text 컴포넌트로 감싸고 있는데요. 텍스트를 입력하실 때는 Text 컴포넌트를 사용하시면 됩니다.

 

기본 컴포넌트: Button

 

Button

 

노란색 테두리를 보시면, 버튼을 만들기 위해 리액트 네이티브 모듈로부터 Button 컴포넌트를 import 해 오면 됩니다. 해당 코드는 onPress를 통해 버튼을 누르게 되면 onAddTextInput 함수가 실행되도록 해 준 결과물입니다. 주석을 보시면 아시겠지만, Button 컴포넌트는 꼭 title이 지정되어야 합니다.

 

기본 컴포넌트: ScrollView

 

이름 그대로 스크롤이 가능하게끔 해 주는 컴포넌트입니다. 사용법은 View 컴포넌트처럼 스크롤이 생길 만한 페이지의 컴포넌트를 감싸주면 됩니다.

 

ScrollView

 

이미지의 개발 내용은 Add Number 버튼을 클릭할 시 임의의 숫자가 계속 쌓이게끔 한 것인데요. 계속해서 쌓일 시, 스크롤이 필요하기 때문에 이런 경우에 ScrollView를 사용하시면 될 것 같습니다. 다음 글에서는 style 지정하는 방법과, 지금 미쳐 못 다룬 기본 컴포넌트에 대한 일지를 작성할 계획이고요. 이후에도 네비게이션이나 애니메이션, 실제 모바일 UI 개발 등, 진도를 계속 빼 일정 주기마다 공부 일지를 작성할 계획입니다.