리액트 네이티브

업로드할 사진 선택 또는 카메라 촬영하기 리액트 네이티브 앱에서 버튼을 클릭했을 때 업로드하라 사진을 갤러리에서 선택할지 아니면 카메라로 새로 촬영할지 사용자가 선택하도록 모달을 띄어보려고 한다. ActionSheetIOS는 이름에서 유추할 수 있듯이 iOS에서만 지원되는 API로, 지금과 같이 사용자에게 선택지를 줄 때 iOS에서 주로 사용하는 UI다. 안드로이드의 경우에는 모달을 통해 선택할 수 있도록 구현하는데, 만약 안드로이드에서도 ActionSheetIOS와 같은 UI로 기능을 구현하고 싶다면 @expo/react-native-action-sheet를 사용하면 된다. 1. 모달 만들기 리액트 네이티브에서 모달을 만들 때는 주로 Modal이라는 컴포넌트를 사용한다. 이 컴포넌트를 사용하지 않아도 ..

React Native에서 이미지를 업로드하기 위해선 react-native-image-picker 라이브러리를 사용하면 된다. 이 라이브러리를 사용하면 서진첩에서 이미지를 선택하거나 카메라로 사진을 촬영할 수 있다. 유사한 라이브러리로는 @react-native-community/cameraroll이 있는데, 이 라이브러리는 이미지를 선택하는 UI를 react-native로직으로 직접 만들 수 있다. 1. 라이브러리 설치 먼저 react-native-image-picker 라이브러리를 설치해준다. $ yarn add react-native-image-picker $ npx pod-install 2. iOS 설정 ios/프로젝트명/Info.plist 파일 하단에 아래 코드를 추가한다. 이 작업은 카메라 ..

이 전 글에는 Firebase로 회원 가입, 로그인을 구현해보았다. 이번에는 회원가입 후 사용자의 닉네임과 프로필 사진을 Firebase에 저장해보자. Firestore는 Firebase에서 제공하는 NoSQL 베이스이다. Firestore에 데이터를 읽고 쓸 때는 규칙을 지정할 수 있다. 이 규칙을 통해 데이터베이스 안에 저장된 데이터에 대해 사용자의 권한을 지정할 수 있다. Firestore 데이터베이스 만들기 먼저 Firebase 콘솔 페이지에 접속해 사이드 메뉴에 있는 Firestore Database를 선택한 뒤 데이터베이스 만들기 버튼을 클릭한다. 테스트만 진행할 것이기 때문에 테스트 모드에서 시작을 체크하고 다음 버튼을 클릭한다. Cloud Firestore의 위치는 asia-northeas..

이 전 글에는 React Native 프로젝트와 Firebase를 연동하는 방법을 살펴보았다. 이제 Firebase로 회원 인증을 구현해보자. Firebase 프로젝트 설정 먼저 이 전 글에서 생성한 Firebase 프로젝트에 접속해 왼쪽 사이드 메뉴에 Authentication을 클릭하고 시작하기 버튼을 클릭해준다. 이메일과 비밀번호를 사용해 예제를 구현해볼 것이기 때문에 이메일/비밀번호를 클릭한다. 나머지 제공업체들도 나중에 추가가 가능하다. 이메일/비밀번호를 사용 활성화해주고 저장 버튼을 클릭한다. 여기까지 했다면 이제 리액트 네이티브 프로젝트로 돌아가서 로그인, 회원가입, 로그아웃 기능을 구현해보자. Firebase로 회원 인증 하기 프로젝트에 lib 디렉터리를 만들고, auth.js 파일을 만들..

useReducer 함수는 useState처럼 상태를 관리할 때 사용할 수 있는 또 다른 Hook 함수다. 이 함수를 사용할 때는 다음과 같은 개념이 사용된다. state : 상태 action : 변화를 정의하는 객체 reducer : state와 action을 파라미터로 받아ㅘ서 그 다음 상태를 반환하는 함수 dispatch : action을 발생시키는 함수 이 Hook는 useState를 여러번 사용하는 상황에 사용하면 유용할 수 있다.(꼭 써야되는건 아니다) 만약 useState로 여러개의 상태를 생성하고 변경한다면 useReducer를 사용할 수 있다. const initialState = {value: 1}; function reducer(state, action) { switch(action...

리액트 네이티브에서 useMemo라는 Hook을 사용해 값을 memoization해 최적화할 수 있다. memoization이란 동일한 계산을 반복해야 할 때 불필요한 연산을 제거하기 위해 이전에 계산한 값을 재사용해 처리를 최적화하는 것을 의한다. const value = useMemo(() => compute(a, b), [a, b]); 이렇게 Hook을 사용하면 a나 b의 값이 변경될 때만 값이 연산된다. 아래 예제 코드를 통해 확인해보자. import React, { useState, useMemo } from "react"; ... const [datas, setDatas] = useState([{ ... }, { ... }]); const datas1 = useMemo(() => datas.r..

리액트 네이티브에서 달력 화면을 만들때는 react-native-calendars라는 라이브러리를 사용한다. 설치 및 사용법 아래 명령어를 통해 라이브러리를 설치하고 디바이스를 다시 로드해준다. $ yarn add react-native-calendars $ npx pod-install $ yarn ios $ yarn android 아래는 react-native-calendars 라이브러리 사용 예제 코드다. import React from "react"; import { Calendar } from "react-native-calendars"; import { StyleSheet } from "react-native"; function CalendarView() { return ( ); } const ..

리액트 네이티브에서 화면 크기를 dp 단위로 가져오는 방법은 두 가지가 있다. 1. Dimensions.get import {Dimentsions} from 'react-native'; const { width, height } from Dimensions.get('window'); Dimensions.get에는 두 가지 문자열을 넣을 수 있다. window : 현재 앱에서 사용할 수 있는 영역의 크기를 가져온다. screen : 전체 화면의 크기를 가져온다. iOS에서는 두 크기의 차이가 없지만, 안드로이드에서 window로 크기를 조회했을 때는 상단의 상태 바와 하단의 소프트 메뉴 바 영역을 제외한 크기를 반환한다. 이 방법은 컴포넌트 외부에서도 작동하므로 StyleSheet에서도 사용할 수 있다. ..