React Native

RN 사이드 프로젝트 중 카카오 로그인을 구현하면서 방법을 정리하려고 한다. 라이브러리는 @react-native-seoul/kakao-login를 사용하였다. 1. 카카오 애플리케이션 생성 및 설정 kakao developers에 로그인 후 애플리케이션을 생성하고 생성한 애플리케이션을 클릭해 카카오 로그인을 활성화 한다. 앱 설정에서 카카오 로그인을 사용할 플랫폼을 Android, iOS 모두 등록해야 한다. Android 플랫폼 등록 패키지명은 설명대로 프로젝트/android/app/src/main/AndroidManifest.xml에 package 속성으로 등록하면 된다. 키 해시는 터미널에서 프로젝트/android/app 경로로 이동해 아래 명령어로 키를 생성해 등록해준다. $ keytool -e..

업로드할 사진 선택 또는 카메라 촬영하기 리액트 네이티브 앱에서 버튼을 클릭했을 때 업로드하라 사진을 갤러리에서 선택할지 아니면 카메라로 새로 촬영할지 사용자가 선택하도록 모달을 띄어보려고 한다. 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 파일을 만들..

React Native 프로젝트에서 연동하고 사용하는 예제를 정리해보겠다. Firebase 프로젝트 생성 먼저 구글 로그인 후 Firebase에 접속해보면 시작하기 버튼이 보일 것이다. 이 버튼을 클릭하고 프로젝트를 추가해준다. 프로젝트 이름을 입력하고 계속 버튼을 클릭한다. 구글 애널리틱스를 사용하려면 Google 애널리틱스 사용 설정을 체크하고 계속 버튼을 누르고 애널리틱스 계정을 선택하거나 만들고 프로젝트 만들기 버튼을 클릭하면 프로젝트가 생성된다. 그럼 이제 안드로이드와 iOS에 Firebase를 설정하고 연동해보자. 안드로이드에 Firebase 설정하기 1. 앱 등록 프로젝트를 생성 후에 이동하는 페이지에 '앱에 Firebase를 추가하여 시작하기'라는 문구와 함께 안드로이드 아이콘이 보일 것이..

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

라이브러리 설치 및 시뮬레이터 실행 리액트 네이티브에서 datetimepicker를 사용하려면 아래 명령어를 통해 라이브러리를 설치하고, 시뮬레이터를 다시 실행해준다. $ yarn add react-native-modal-datetime-picker @react-native-community/datetimepicker $ npx pod-install $ yarn ios $ yarn android @react-native-community/datetimepicker는 iOS와 안드로이드 각각 플랫폼에서 특화된 날짜/시간 선택 컴포넌트를 제공해주고 react-native-modal-datetime-picker는 제공된 컴포넌트를 모달 형태로 쉽게 사용할 수 있게 해준다. DateTimePickerModal ..

리액트 네이티브에서 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 ..