elevne's Study Note

React Native 를 활용하여 스마트폰의 카메라롤, 위치, 영속되는 저장소 등을 쉽게 사용할 수 있다. 이러한 플랫폼 특유의 API 는 React Native 에 내장된 모듈을 통해 사용하기 편리한 비동기 자바스크립트 인터페이스로 제공된다고 한다. 간단하게 사용할 수 있는 API 들의 사용법을 하나씩 알아보았다. 이번에는 지리적 위치정보를 사용하는 방법에 대해서 알아보았다. 모바일 앱에서는 사용자의 위치를 안다는 것이 매우 중요하다. 사용자의 위치에 기반하여 정보를 제공, 상호작용을 할 수 있다. 우선 아래와 같은 코드를 사용하여 간단하게 사용자의 위치를 얻어올 수 있다고 한다. GetLocation.getCurrentPosition({ enableHighAccuracy: true, timeout:..

저번 시간에는 FlatList 컴포넌트에 대해서 알아보았고, 이번에는 이와 매우 유사한 SectionList 컴포넌트에 대해서 알아보았다. 다시 한 번 알아보자면, FlatList 는 내용이 변하는 긴 스크롤 리스트이지만 데이터 구조가 비슷한 경우를 위해 디자인되었고, SectionList 는 데이터를 섹션으로 구분해서 보여주어야 하는 경우를 위해 디자인되었다. 이번에도 예시 코드를 통해 확인해보았다. import { StyleSheet, Text, View, SafeAreaView, SectionList, StatusBar, } from 'react-native'; const DATA = [ { title: 'Main dishes', data: ['Pizza', 'Burger', 'Risotto'], ..

여러 자식 뷰를 가질 수 있는, 스크롤이 되는 컨테이너인 리스트는 모바일 앱 개발에 있어서 매우 핵심적인 인터페이스라고 한다. React Native 에는 편리한 API 를 제공하는 두 가지 리스트 컴포넌트가 있는데 FlatList 컴포넌트와 SectionList 컴포넌트이다. FlatList 는 내용이 변하는 긴 스크롤 리스트이지만 데이터 구조가 비슷한 경우를 위해 디자인되었고, SectionList 는 데이터를 섹션으로 구분해서 보여주어야 하는 경우를 위해 디자인되었다. FlatList 와 SectionList 컴포넌트로 웬만한 리스트를 대부분 만들 수 있지만 리스트에 내부적으로 특정 기능을 넣어야 할 때는 VirtualizedList 를 사용할 수도 있다고 한다. 오늘은 우선 FlatList 에 대..

PanResponser 는 TouchableHighlight, Pressable, Button 등과 다르게 컴포넌트가 아니라 React Native 에서 제공하는 하나의 API로 여러 터치를 하나의 제스처로 조정해준다. 이는 Extra Touch 들에 대해 탄력적인 Single-Toch 를 만들어주고, 기본적인 Multi-Touch Gesture 을 인식하는데 사용될 수 있다고 한다. PanResponder gestureState 객체를 사용하여 현재 제스처의 속도, 누적 이동거리 등과 같은 원시 위치 데이터에 접근할 수 있다. 아래와 같은 형식으로 PanResponder 의 함수를 사용할 수 있다. onPanResponderMove: (event, gestureState) => {} 위 코드에서 사용되..

웹 기반 인터페이스에서는 마우스 형태의 컨트롤러를 위해 디자인되었다. Hover 상태 등을 이용하여 사용자에게 인터랙션 기능 여부를 표시하는데, 모바일은 이와는 다르게 터치 기반이다. RN 에서는 터치에 반응하는 인터페이스를 만들 수 있도록 여러 API 를 제공한다. Button, TouchableHighlight, Pressable 를 사용할 수 있다. 위와 같은 코드로 Button 컴포넌트를 사용할 수 있다. onPress 는 웹페이지에서 onClick 과 같은 역할을 한다고 생각하면 되고, title prop 으로 넣은 값이 버튼 안에 보이게 되는 글자이다. 위 두 속성은 Button 컴포넌트에 필수적으로 필요한 props 이다. 아래와 같은 코드로 버튼을 여러 개 분리해서 만들어볼 수 있다. im..

Image, ImageBackground 컴포넌트를 사용할 수 있다. Image 컴포넌트는 children 을 가질 수 없다. 저번 시간에 알아본 것처럼, 컴포넌트에 source 로 {require("./경로")} 를 지정해주면 해당 경로에 있는 이미지를 사용하게 되는 것이다. App 에 asset 으로 포함된 이미지 대신 웹에 있는 이미지를 불러와서 보여줄 수도 있다. 이와 같이 (위 코드예시는 asset 으로 포함시킨 것이지만) 이미지를 네트워크 주소로 지정하는 것은 이미지를 asset 으로 포함시켜 지정하는 것보다 약간의 이점이 있다고 한다. 개발기간에 프로토타이핑을 진행할 때는 모든 에셋을 꼼꼼히 import 하는 것보다 이 방법이 더 쉬우며, 모바일 앱의 저장 용량을 줄여줄 수도 있다. 단, 나..

React Native 에서는, Web 과는 다르게 오직 Text 컴포넌트만이 텍스트 노드를 자식으로 가질 수 있다. 텍스트를 화면에 표시하기 위해서는 컴포넌트로 모두 감싸주어야 한다는 뜻이다. RN 에서 Text 컴포넌트를 사용할 때는 Web 처럼 , 같은 하위 태그를 사용할 수는 없으나, fontWeight 이나 fontStyle 등의 속성을 이용하여 비슷한 효과를 낼 수 있다. 아래와 같이 사용해볼 수 있다. The quick brown fox jumped over the lazy dog. 단, 위처럼 모든 style 을 inline 형태로 적는 것보다 아래와 같이 따로 styles 객체 안에 넣어주는 것이 사용하기 간편하다. const styles = StyleSheet.create({ bold:..

저번 시간에 작성했던 코드에서 거의 변경사항이 없다. 우선 가장 중심이 되는 Weather.js 의 최종 코드는 아래와 같이 구성되었다. import { useCallback, useEffect, useState } from "react"; import { StyleSheet, Text, View, TextInput, Image, ImageBackground } from "react-native"; import Forecast from "./Forecast"; import open_weather_map from "./open_weather_map"; const Weather = () => { const [info, setInfo] = useState({ zip: "", forecast: null }); ..