React Native

드로어 내비게이터(Drawer Navigator) 설정 및 사용법 드로어 내비게이터(Drawer Navigator)는 촤측 또는 우측 사이드바를 만들고 싶을 때 사용하는 내비게이터다. 사이드바를 모바일 앱에서는 드로어(Drawer)라고 부른다. 내비게이터를 사용하려면 아래와 같은 명령어를 통해 라이브러리를 설치해야 한다. $ yarn add @react-navigation/drawer react-native-gesture-handler react-native-reanimated $ cd ios $ pod install $ cd .. $ yarn ios $ yarn android react-native-gesture-handler : 드로어 내비게이터에서 사용자 제스처를 인식하기 위해서 내부적으로 사용하는..

헤더 타이틀 커스터마이징 react-navigation에서는 타이틀 영역을 헤더(Header)라고 부른다. 헤더 부분의 타이틀을 커스터마이징할 땐 두 가지 방법이 있는데, 첫 번째 방법은 Stack.Screen의 options 속성으로 설정하는 것이다. 두 번째 방법은 화면 컴포넌트에서 navigation.setOptions 함수를 사용하는 것이다. 아래 예제는 useEffect Hook 함수를 사용하였다. function HomeScreen({navigation}) { useEffect(() => { navigation.setOptions({title: '홈'}); }, [navigation]); return ( ... ); } 만약 컴포넌트에 라우트 파라미터값을 넣어야 한다면 아래와 같이 함수로 설정..

React Navigation 설치 및 사용법 React Navigation이란? 모바일 애플리케이션은 보통 여러 화면으로 구성되어 있는데 이러한 애플리케이션을 만들려면 내비게이션 관련 서드 파티 라이브러리를 사용해야 한다. 내비게이션과 관련해 devbksheen.tistory.com 이전 블로그 글에서는 React Navigtion을 소개하고 설치 후 사용해보았다. 이번 글에는 React Navigation을 더욱 활용하는 법을 알아보자. 라우트 파라미터 새로운 화면을 보며줄 때 의존해야 하는 어떤 값이 있으면 라우트 파라미터를 설정해야 한다. 예를 들어 회원 고유번호가 1인 데이터를 보여주는 화면이 있을때 {"id": 1}과 같은 방식으로 파라미터를 설정한다. 라우트 파라미터를 설정해 화면을 전환할 ..

React Navigation이란? 모바일 애플리케이션은 보통 여러 화면으로 구성되어 있는데 이러한 애플리케이션을 만들려면 내비게이션 관련 서드 파티 라이브러리를 사용해야 한다. 내비게이션과 관련해 사용할 수 있는 라이브러리가 두 개 있다. react-navigation 리액트 네이티브 커뮤니티에서 관리하며, 리액트 공식 메뉴얼에서도 이 라이브러리로 화면을 전환하는 방법을 소개할 정도로 사용률이 가장 높은 라이브러리다. 이 라이브러리는 내비게이션 기능이 자바스크립트로 구현되어 있다. react-native-navigation 홈페이지 제작 서비스 Wix에서 관리한다. 이 라이브러리는 이미 만들어진 네이티브 앱에 리액트 네이티브를 적용하는 경우 사용하기에 더 적합하며, 내비게이션 기능이 자바스크립트가 아닌..

useEffect란? useEffect Hook 함수를 사용하면 컴포넌트에서 특정 상태가 바뀔 때마다 원하는 코드를 실행할 수 있다. 또한, 컴포넌트가 마운트(가장 처음 화면에 나타남)되거나 언마운트(화면에서 컴포넌트가 사라짐)될 때 원하는 코드를 실행할 수도 있다. 데이터를 불러와서 상태를 업데이트하는 useEffect(예제 load 함수)를 작성할 때는 꼭 기존의 data를 저장(예제 save 함수)하는 useEffect보다 상단 위치에 코드를 작성해야 한다. useEffect는 등록된 순서대로 작동하는데, 저장하는 useEffect가 먼저 호출되면 데이터의 초깃값을 저장한 다음 불러오기 때문에 초깃값만 불러오기 때문에 데이터를 업데이트하는 useEffect가 먼저 등록되어야 한다. 아래 코드는 컴포..

AsyncStorage란? AsyncStorage는 리액트 네이티브에서 사용할 수 있는 key-value 형식의 저장소다. iOS에서는 네이티브 코드로 구현되어 있으며, 안드로이드에서는 네이티브 코드와 SQLite를 기반으로 구현되어 있다. AsyncStorage는 브라우저에서 사용하는 localStrorage와도 비슷하다. 값을 저장할 때는 문자열 타입으로 저장해야 하며, getItem, setItem, removeItem, clear 등 localStorage에서 사용하는 메서드와 같은 이름을 가진 메서드들도 존재한다. localStorage와의 큰 차이점이라면 AsyncStorage는 비동기적으로 작동한다는 것이다. 값을 조회하거나 설정할 때 Promise를 반환한다. Promise와 동기, 비동기..

Promise란? 자바스크립트를 사용하다 보면 빠른 속도, 가독성을 위해 비동기적 작업을 사용할 때가 많다. Promise는 자바스크립트에서 비동기적 작업을 편하게 관리하도록 도와주는 객체이다. 비동기적 작업은 특정 작업이 끝나지 않아도 다음 작업을 시작하는 작업이다. 반대로 동기적 작업은 특정 작업이 끝날때까지 다음 작업을 시작하지 않고 대기하다가 기존 작업이 끝나고 다음 작업을 시작하는 작업이다. Promise 만들기 아래 예제는 callback 함수를 사용하는 비동기적 코드 예시이다. 이런 코드가 많아지면 가독성이 많이 떨어진다. function double(number, callback) { setTimeout(() => { if (!callback) return; const result = nu..

React Native에서 Alert API를 통해 알림창을 구현해보겠다. const deleteItem = () => { Alert.alert( '삭제', '정말로 삭제하시겠습니까?', [ {text: '취소', onPress: () => {}, style: 'cancel'}, { text: '삭제', onPress: () => { onDelete(id); }, style: 'destructive', }, ], { cancelable: true, onDismiss: () => {}, }, ); }; ... return( ... deleteItem()} /> ) Alert.alert 함수의 파라미터는 제목, 내용, 버튼 배열, 옵션 객체 순서다. 버튼 배열에 넣는 버튼 객체에는 text 값을 통해 버튼의..

아이콘이나 이미지를 사용할때 라이브러리로 react-native-vector-icons가 유용하다. React-Native-vector-icons GitHub에 활용하는 방법이 소개 되어 있다. 백터 아이콘(Vector Icons)은 폰트 또는 SVG를 사용해 크기가 조정돼도 아이콘이 흐려지거나 깨지지 않는다. 터미널에서 아래 명령어를 사용해 설치가 가능하다. $ yarn add react-native-vector-icons 설치 후 iOS와 안드로이드 프로젝트 둘 다 적용이 필요하다. iOS에 react-native-vector-icons 적용하기 ios 디렉터리로 이동해 pod install 명령어를 사용한다. $ cd ios $ pod install ios 디렉터리를 보면 프로젝트명으로 된 폴더안에..

FlatList 사용 예제 리액트 네이티브에서 배열 안에 들어있는 원소들을 보여줄때 FlatList 컴포넌트를 사용하기도 한다. 아래 예제 코드에 설정값을 보며 설명을 정리해보겠다. import React from 'react'; import {View, Text, FlatList, StyleSheet, Image} from 'react-native'; function FlatListTest() { const todos = [ {id: 1, text: '샤워하기', done: true}, {id: 2, text: '기술 공부하기', done: false}, {id: 3, text: '독서하기', done: false}, ]; return ( } renderItem={({item}) => ( {item.d..