React Native에 본격적으로 개발하기에 앞서 React Natvie 사이트에서 제공하는 문서들을 읽어보고 습득해보려고 합니다. 아주 예전에 코딩을 해보고 한번 도 해보지 않은 상태기 때문에 사실 JavaScript에 대해서도 가물가물한 상태로 공식 사이트에 나와 있는 React Natvie에 대한 기본 정보들을 읽어보며 공부하고 실제 개발할 준비를 해보겠습니다. 물론 공식 문서를 읽어도 결국 구글링이나 책을 찾아가며 앱을 개발해야 하겠지만 옛날 기억을 떠올리며 공부해 보겠습니다.
React Native 사전 준비 사항
우선 가장 먼저 소개 페이지를 읽어봤습니다. React에 대해 이미 알고 있다면 해당 문서를 뛰어넘어도 되고 간단히 읽어보고 상기시키기만 해도 충분하다고 합니다. 저는 React 개발은 해보지 않았기 때문에 우선 꼼꼼히 읽어봤습니다. 그다음으로 JavaScript의 기초에 대해 알고 있어야 된다고 합니다. 그렇지 않다면 Mozilla Developer Network에서 JavaScript에 대해 보고 오라고 합니다.
다음으로는 실제 코드를 입력해 사이트에서 바로 안드로이드와 IOS 그리고 웹의 형상을 볼 수 있도록 해주는 것이 나옵니다. 이것을 snack이라고 하는데 snack은 React Native 코드를 온라인에서 작성하고 실행할 수 있는 플랫폼입니다. 이를 통해 개발자는 앱을 빠르게 만들고 프로토타입을 테스트하고 공유할 수 있습니다. 구글에 "Snack expo"라고 검색하면 나오는 사이트를 통해 바로 사용하실 수 있습니다.
React Native 컴포넌트
Core Components
React Natvie에는 컨트롤부터 Activity indicator까지 다양한 핵심 컴포넌트가 있지만 주로 아래와 같이 핵심 컴포넌트를 정의하고 있습니다. 추가로 아래 그림은 React Native 공식 사이트에서 코어 컴포넌트에 대한 설명과 함께 대표적인 컴포넌트인 View 컴포넌트에 대해 이해할 수 있도록 제시하고 있는 그림으로 컴포넌트를 이해하는데 많이 도움이 될 것으로 생각이되어 가져왔습니다.
1) View: 레이아웃을 지원하는 컨테이너로서 플렉스박스와 스타일, 일부 터치 처리 및 접근성 컨트롤을 지원하는 컴포넌트입니다. 어떠한 구성 요소를 담기 위한 박스로 생각하면 알기 쉽습니다.
2) Text: 이름 그대로 텍스트를 표시하고 스타일을 적용할 수 있는 컴포넌트로 터치 이벤트를 처리할 수도 있습니다.
3) Imag: 여러 종류의 이미지를 보여주는 컴포넌트입니다.
4) ScrollView: 여러 컴포넌트와 뷰를 포함할 수 있는 스크롤링 컨테이너입니다.
5) TextInput: 사용자가 텍스트를 입력할 수 있는 컴포넌트입니다.
위의 5가지 컴포넌트에 StyleSheet 컴포넌트를 더해 기본 컴포넌트로 정의하고 있습니다.
6) StyleSheet: CSS의 stylesheet와 유사한 추상화 layer를 제공하는 컴포넌트입니다.
그 외 컴포넌트
다양한 컴포넌트들이 있지만 User Interface 컴포넌트인 Button과 Switch가 있고 List Views 컴포넌트와 안드로이드와 IOS 각각에서 제공하는 컴포넌트들도 있습니다. 그 외에 ActivityIndicator, Alert, Animated 등 특정 응용 프로그램에 유용한 다양한 컴포넌트들도 있습니다. 각 컴포넌트들에 대한 자세한 내용은 아래 경로를 통해 React Native 공식 사이트에 접속 후 확인하실 수 있으며, 자주 사용되는 컴포넌트들에 대해서만 간단히 설명을 추가해 보겠습니다.
구글 내 React Native 검색 > 공식 사이트 접속 > Development > Components 문서
1) FlatList: 큰 목록을 효율적으로 렌더링 하기 위해 사용되는 컴포넌트입니다. 동적 데이터 소스를 기반으로 항목을 렌더링 합니다.
2) SectionList: 섹션으로 구분된 목록을 렌더링 하는 데 사용됩니다. FlatList와 비슷하지만 섹션 헤더를 추가할 수 있습니다.
3) Button: 기본적인 버튼 컴포넌트로 텍스트와 아이콘 그리고 클릭 이벤트를 설정할 수 있습니다.
4) Switch: 토글 가능한 스위치 버튼을 생성합니다.
5) TouchableOpacity: 클릭 가능한 영역을 만들고, 클릭 시 투명도가 감소하는 애니메이션을 적용할 수 있는 컴포넌트입니다. 실제로는 위에 Button 컴포넌트보다 많이 사용되는 것 같습니다.
6) TextInput: 사용자가 텍스트를 입력할 수 있는 입력 필드를 제공하는 컴포넌트입니다.
7) ActivityIndicator: 로딩 중임을 나타내는 스피너 컴포넌트입니다.
8) StatusBar: 상태 표시줄의 스타일을 제어하는 컴포넌트입니다.
9) Modal: 화면 위에 나타나는 모달 다이얼로그를 생성합니다.
Image 컴포넌트 사용해 보기
그렇다면 위에서 읽어봤던 많은 컴포넌트들 중 가장 먼저 앱에 이미지 삽입을 위한 Image 컴포넌트를 사용해 보겠습니다. Image 컴포넌트 안에는 URL을 통한 이미지, 정적 리소스 이미지, 임시 로컬 이미지 및 카메라 롤과 같은 로컬 디스크의 이미지와 같이 다양한 유형의 이미지를 표시할 수 있지만 저는 기본적으로 보여주고자 하는 이미지를 어셋에 저장해 표시해 보았습니다.
1) 첫 번째로 위에서 말했듯 저장할 이미지를 프로젝트의 assets 디렉터리에 하위 디렉터리로 images를 만든 후 저장했습니다. 파일명은 home_background.jpeg입니다. 너무나 간단한 설명이지만 assets 디렉터리에 하위 디렉터리를 만드는 방법은 VS code에서 왼쪽 assets 디렉터리를 우클릭 후 New Folder 버튼을 통해 생성해 줄 수 있습니다.
2) 두 번째로 PlaceholderImage라는 상수를 만들어 require 함수를 통해 주어진 경로에 있는 이미지 파일을 가져와 할당했습니다. 여기서 파일의 경로는 상대 경로를 사용하여 지정해 줬습니다.기본적인 내용이지만 “./”는 현재 디렉터리를 나타내며, 현재 디렉터리의 하위 디렉터리인 aseets안에 images라는 디렉터리안에 home_backgroud.jpeg 파일을 의미하는 경로입니다.
관련코드
const PlaceholderImage = require('./assets/images/home_background.jpeg')
3) 프로젝트를 생성했을 때 기본적으로 있었던 styles 스타일 객체에 image라는 이름으로 백그라운드 이미지에 적용할 스타일을 정의합니다.
관련코드
image:{
width: 320,
height: 400,
borderRadius : 18
}
4) 마지막으로 기본적으로 생성되어 있던 View 컴포넌트 안에 Text 컴포넌트를 지우고 Image 컴포넌트를 만들어 줬습니다. 이미지 컴포넌트 안에 source 속성에는 위에 2번에서 만들었던 PlaceholderImage라는 상수를 할당해 줬고 style 속성에는 3번에서 만들었던 styles라는 스타일 객체에서 image라는 값을 할당해 줬습니다.
관련 코드
<View style={styles.container}>
<Image source = {PlaceholderImage} style = {styles.image}/>
<StatusBar style="auto" />
</View>
5) 그 후 npx expo start를 통해 앱을 빌드하고 Expo 앱을 통해 확인하면 정상적으로 백그라운드 이미지가 적용된 것을 볼 수 있습니다.
마무리
오늘은 이렇게 React Native를 구성하는 컴포넌트들은 무엇이 있는지 기본적인 내용을 공부하고 실제 앱에 image 컴포넌트를 이용하여 이미지를 적용하는 방법에 대해 알아보았습니다. image 컴포넌트를 이용한 방법 중 PlaceholderImage라는 상수를 만들어 경로를 할당하고 다시 그것을 할당하는 방법은 사실 위에 코드에서는 크게 필요하진 않았던 부분인 것 같습니다. Expo 사이트에 나와 있는 방식을 그대로 가져와 구현해 보았고 이러한 방식의 유용한 점이나 다른 방법을 통해 이미지 컴포넌트를 사용하는 방식들은 앞으로 차근차근 공부해보려고 합니다. 많이 미흡한 설명이었지만 도움이 되셨기를 바라며, 다음번에는 실제 버튼을 구현하거나 내비게이션 바를 만드는 작업을 해보려고 합니다.