react

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와 동기, 비동기..

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..

불변성이란? 리액트에서 객체와 배열 타입의 상태를 다둘 때는 불변성(immutability)을 지켜야 한다. 불변성을 지킨다는 것은 객체 또는 배열을 직접 수정하지 않는다는 것을 의미한다. 선언한 객체나 배열을 다른 값으로 변경하고 싶을때는 복제해 새로운 객체나 배열을 생성해야 한다. 불변성을 지켜야 하는 이유 리랙트에서 불변성을 지켜야 하는 이유는 렌더링 성능 최적화 방식 때문이다. 리액트에서는 부모 컴포넌트가 리렌더링(상태가 업데이트되어 다시 렌더링 되는 것)되면 기본적으로 자식 컴포넌트들 또한 리렌더링 된다. 문제는 변경사항이 없는 컴포넌트들도 리렌더링 된다는 것이다. 리액트는 최적화가 많이 되어있어서 리렌더링 된다고 성능에 부하가 발생하진 않지만, 컴포넌트에서 다루는 데이터가 많아지거나 연산량이 ..

키보드에서 Enter(return)를 눌렀을 때 onSubmitEditing 속성으로 함수를 호출할 수 있다. TextInput에 returnKeyType 속성은 키보드 완료 부분이 설정한 문자열로 보이게 설정할 수 있다. const onPress = () => { // .. 실행할 함수 } 위 코드에선 done으로 설정했는데 iOS 한국어 키보드를 켜보면 "완료"로 번역되어 나온다. 안드로이드에서는 체크 아이콘으로 설정되어있어서 설정할 필요는 없다. returnKyeType 속성은 상황에 따라 다음과 같은 값들을 지정할 수 있다. 플랫폼 공통 done : 완료 go : 이동 next : 다음 search : 검색 send : 보내기 iOS 전용 default : 기본 emergency-call : 긴급..

영역에 터치할때 효과를 줄 수 잇는 컴포넌트를 정리해보겠다. 터치할 수 있는 영역을 다음 컴포넌트 중 하나로 감싸면 된다. TouchableHighlight 터치했을 때 배경색을 변경한다. 아래 사이트에서 예제를 확인할 수 있다. TouchableHighlight · React Native If you're looking for a more extensive and future-proof way to handle touch-based input, check out the Pressable API. reactnative.dev TouchableOpacity 터치했을 때 투명도를 조정한다. activeOpacity 속성을 이용해 투명도의 정도(default 0.2)를 설정한다. TouchableOpacity..

사용자 입력값 받기 리액트 네이티브에서 사용자의 키보드 입력을 받아낼때는 TextInput 컴포넌트를 사용한다. import React from 'react'; import {View, StyleSheet, TextInput} from 'react-native'; function AddTodo() { return ( ); } const styles = StyleSheet.create({ container: { height: 64, paddingHorizontal: 16, // 좌우측 패딩 borderColor: '#bdbdbd', borderTopWidth: 1, borderBottomWidth: 1, justifyContent: 'center', }, input: { fontSize: 16, paddi..