React Native 개발의 기본 개념

React Native는 Facebook에서 제공하는 오픈 소스 모바일 애플리케이션 개발 프레임워크로, iOS와 Android 애플리케이션을 동일한 코드베이스로 개발할 수 있게 해줍니다. React Native는 React의 컴포넌트 기반 아키텍처를 따르며, JSX 문법을 사용하여 UI를 빌드합니다. 이를 통해 모바일 애플리케이션의 UI를 쉽게 구성하고, 재사용 가능한 코드로 빠르게 개발할 수 있습니다.

React Native의 주요 특징

• JavaScript 기반: React Native는 JavaScript를 사용하여 네이티브 모바일 애플리케이션을 개발할 수 있습니다.
• 크로스 플랫폼: iOS와 Android 애플리케이션을 동일한 코드베이스로 개발할 수 있어 개발 효율성이 높습니다.
• 네이티브 코드와의 상호작용: React Native는 네이티브 iOS 및 Android 라이브러리와 상호작용하며, 최적화된 네이티브 코드로 컴파일됩니다.
• 커스터마이징: 필요에 따라 React Native의 기본 컴포넌트를 커스터마이징하여 자신만의 애플리케이션을 만들 수 있습니다.

React Native에서 제공되는 주요 컴포넌트

1. View: UI의 기본 요소로 다른 모든 구성 요소를 포함할 수 있습니다.
2. Text: 텍스트를 표시하며, 글꼴 스타일, 크기 등을 지정할 수 있습니다.
3. Image: 이미지를 표시하며, 로컬 및 원격 URL에서 이미지를 가져올 수 있습니다.
4. TextInput: 사용자 입력을 받기 위한 텍스트 입력 필드입니다.
5. ScrollView: 스크롤 가능한 영역을 만들고, 스크롤 이벤트를 처리할 수 있습니다.
6. Button: 사용자가 클릭할 수 있는 버튼입니다.
7. Picker: 드롭다운 목록을 생성하며, 플랫폼에 따라 디자인이 달라집니다.
8. FlatList: 대량의 데이터를 렌더링하며, 스크롤 시 화면에 표시되는 항목을 자동으로 생성합니다.
9. TouchableOpacity: 클릭이나 탭을 감지하여 인터랙션을 처리하는 요소입니다.
10. WebView: 웹 페이지를 렌더링하는 데 사용됩니다.

인기 있는 외부 라이브러리

• react-navigation: 화면 전환을 지원하는 네비게이션 라이브러리입니다.
• react-native-vector-icons: 벡터 아이콘을 쉽게 사용할 수 있도록 도와주는 라이브러리입니다.
• react-native-swiper: 이미지 슬라이드 쇼 등의 효과를 만드는 데 유용한 라이브러리입니다.
• react-native-paper: Material Design을 따른 UI 구성 요소와 테마를 제공합니다.
• native-base: 크로스 플랫폼 모바일 애플리케이션 개발을 위한 UI 요소 세트를 제공합니다.

React Native는 활발한 커뮤니티와 오픈 소스 프로젝트 덕분에 기능이 계속 확장되고 있습니다. 외부 라이브러리와 툴을 사용해 더욱 다양한 기능을 추가할 수 있으며, 필요한 경우 커스터마이징도 가능합니다.

더 많은 React Native 관련 자료와 도구는 awesome-react-native에서 확인할 수 있습니다.

react native asyncstorage

React Native AsyncStorage 사용법

어싱크스토리지는 개발을 할 때 변수값을 저장해두는 공간이라고 생각하면 편할 것 같습니다!
근데 어싱크스토리지 말고도 변수값은 저장은 해둘 수 있는 곳이 많죠. 예를 들어 컴포넌트의 state나 redux 등으로 저장이 가능합니다.

그렇다면, 어싱크스토리지는 왜 쓰는가?

어싱크스토리지는 로컬 데이터베이스 저장소라고 생각하시면 다가가기 쉬울 것 같습니다. 앱이 꺼져도 데이터베이스는 남아있듯이, 똑같이 어싱크스토리지에 값을 저장하고 앱을 꺼도 데이터가 저장되어 있는 개념입니다.

참고 문서

• AsyncStorage - React Native 공식 문서
• @react-native-community/async-storage - npm
• andpor/react-native-sqlite-storage - GitHub

사용법

먼저, npm을 설치합니다. 어떤 패키지를 선택할지는 개발자의 선택에 따라 달라집니다. 아래는 예시로 사용된 코드입니다:

값 저장하기

AsyncStorage.setItem('id', 'userId0', () => {
  console.log("저장되었습니다!");
});
  

값 불러오기

AsyncStorage.getItem('id', getId => {
  console.log(getId); 
});
  

위 코드에서 setItem과 getItem만 알고 있어도 유용하게 사용할 수 있습니다.

JSON 데이터 저장하기

JSON 형태의 데이터를 저장할 때는 JSON.stringify를 사용하여 문자열로 변환해야 합니다.

데이터 바꾸기

AsyncStorage.mergeItem('key', 'newData');
  

키값을 통해서 저장된 데이터를 바꿀 수 있습니다.

데이터 전체 지우기

AsyncStorage.clear(); // 복구 불가
  

위 코드를 사용하면 저장된 모든 데이터가 삭제됩니다. 주의할 점은 복구가 불가능하다는 점입니다.

react native 생체인식

http://www.npmjs.com/package/react-native-touch-id


Install

npm i --save react-native-touch-id

npm i --save react-native-touch-id

or
yarn add react-native-touch-idyarn add react-native-touch-id

Android

react-native version < 0.60 이면
react-native link react-native-touch-id

react-native link react-native-touch-id

으로 link 해준다.

AndroidManifest.xml

AndroidManifest.xml에
<uses-permission android:name="android.permission.USE_FINGERPRINT" />
추가 -> 핸드폰 지문인식 권한 추가

<uses-permission android:name="android.permission.USE_FINGERPRINT" />

코드

import TouchID from 'react-native-touch-id'; 


const optionalConfigObject = 
{   title: 'Authentication Required',  // 타이틀   
    imageColor: '#e00606',  // 지문인식 기본 컬러   
    imageErrorColor: '#ff0000',  // 지문인식 실패 컬러   
    sensorDescription: 'Touch sensor',  // 터치센서 
    description Text 변경   sensorErrorDescription: 'Failed', // 터치센서 Fail Text 변경   
    cancelText: 'Cancel', // Android // 취소버튼 Text 변경   
    fallbackLabel: 'Show Passcode',  // ios ( 비어있으면 레이블이 숨겨짐 )   
    unifiedErrors: false, // 통합 오류 메시지 사용 ( 기본값 false)   
    passcodeFallback: false  // ios-faceId / touch 사용할 수 없는 경우 기기비밀번호 사용여부 
    } 
    
    TouchID.authenticate('description', optionalConfigObject)
    .then(success => {     
    console.log("지문인식 성공"); // 지문인식 성공했을 때 코드를 넣으면 됨   
    })   	
    .catch(error => {     	
    console.log("지문인식 실패"); // 실패했을 때 코드를 넣으면 됨.   
    });

isSupported ()

import TouchID from 'react-native-touch-id'; 

const optionalConfigObject = {  
	unifiedErrors: false  // 통합 오류 메시지 사용 ( 기본값 false )
	passcodeFallback: false // true가 전달되면 기기가 touch id / face id 등에 등록되지 않은
    경우 isSupported에서 오류를 반환하도록 허용합니다. 
    그렇지 않으면 사용자가 등록되지 않은 경우에도 지원되는 방법 만 알려줍니다.(기본값 false) 
    } 
    
    
TouchID.isSupported(optionalConfigObject).then(biometryType => {
    // Success code 
    if (biometryType === 'FaceID'){         
    	console.log('faceId 지원')     
    } 
    else {     
    	console.log('TouchID 지원.');     
    }  
    })
    .catch(error => {
    	// Failure code
    	console.log(error); // 실패했을 때 에러 로그 찍어보기  
    });