리액트네이티브로 채팅 앱 만들기(1)

Cornflower blue·2021년 12월 15일

목록 보기

4/7

'처음배우는 리액트 네이티브'(한빛미디어, 김범준 지음)을 보며 채팅 어플리케이션을 따라 만드는 중입니다.

0. 필수 라이브러리 설치하기

npm install @react-navigation/native
화면 간 이동을 위해 리액트 네비게이션을 설치합니다.

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

react-native-gesture-handler
: 리액트 네이티브 제스처 핸들러는 리액트네이티브에서 가능한 최상의 터치기반 경험을 제공하기 위해 네이티브 기반의 제스처 관리 API를 제공합니다.
react-native-reanimated
: 제스처 기반 상호작용에 더 큰 유연성을 허용해준다.
react-native-screens
: 네이티브 네비게이션 컨테이너 요소를 리액트네이티브에게 노출시킨다.
react-native-safe-area-context
: safe area에 해당하는 부분을 유연하게 다룰 수 있도록 해준다. 안드로이드와 웹에서도 작동한다.
@react-native-community/masked-view
: (추후 기입)

npm install @react-navigation/stack @react-navigation/bottom-tabs
스택 내비게이션과 탭 내비게이션을 활용하기 위해 해당 라이브러리를 설치한다.

npm install styled-components prop-types
스타일 작성을 위한 스타일드 컴포넌트 라이브러리와 타입 확인을 위한 prop-types 라이브러리를 설치한다.

1. 기초적인 컴포넌트 이해하기

StatusBar

: 핸드폰 상단에 위치한 상태표시줄을 다양한 방식으로 다룰 수 있게 해준다. 노출 여부와 색상 노출 시 애니메이션 등을 지정할 수 있다.
import {StatusBar} from 'react-native';

ThemeProvider

: styled-components는 < ThemeProvider > 를 통해 스타일드 컴포넌트에서 정의된 theme를 사용할 수 있도록 합니다. < ThemeProvider >는 context API를 통해 하위에 있는 모든 요소에서 theme를 사용할 수 있게끔 합니다.

2. 파이어베이스

파이어베이스는 인증, 데이터베이스 등의 다양한 기능을 제공하는 개발 플랫폼입니다.

파이어베이스를 이용하려면 파이어베이스 콘솔에서 프로젝트를 생성해야 합니다. (https://console.firebase.google.com)
생성한 프로젝트 화면으로 이동하여 "웹"을 선택하고 앱을 추가합니다.
앱 추가 후 Firebase SDK snippet을 확인하면 파이어베이스를 사용하기 위한 설정값을 확인할 수 있습니다.
해당 설정값을 루트디렉터리 하단에 firebase.json 파일 생성 후 다음과 같은 형태로 붙여 넣습니다.
{ "apiKey":"...", "authDomain":"...", "databaseURL":"...","projectID":"...", "storageBucket":"...", "messagingSenderId":"...", "appId":"...", }
.gitignore 파일에 firebase.json을 추가하니다.
... #firebase firebase.json