React Native

리액트 네이티브에서 화면 크기를 dp 단위로 가져오는 방법은 두 가지가 있다. 1. Dimensions.get import {Dimentsions} from 'react-native'; const { width, height } from Dimensions.get('window'); Dimensions.get에는 두 가지 문자열을 넣을 수 있다. window : 현재 앱에서 사용할 수 있는 영역의 크기를 가져온다. screen : 전체 화면의 크기를 가져온다. iOS에서는 두 크기의 차이가 없지만, 안드로이드에서 window로 크기를 조회했을 때는 상단의 상태 바와 하단의 소프트 메뉴 바 영역을 제외한 크기를 반환한다. 이 방법은 컴포넌트 외부에서도 작동하므로 StyleSheet에서도 사용할 수 있다. ..

Animated 사용법 리액트 네이비트에서 애니메이션을 구현할 때는 Animated라는 객체를 사용한다. 일단 Animated를 사용하려면 Value를 하나 만들어야 한다. import React, {useRef} from 'react'; import {Animated} from 'react-native'; function Sample() { const animation = useRef(new Animated.Value(1)).current; } Value를 만들 때는 이렇게 useRef를 사용해야 한다. 래퍼런스 선택 외에 특정 값을 컴포넌트 생성 시에 설정하고, 컴포넌트가 사라질 때까지 재사용하고 싶은 경우에도 이와 같이 useRef를 사용해 구현할 수 있다. Value의 생성자 함수 인자에는 초깃값..

date-fns 라이브러리란? 보통 앱에서 날짜 형식을 보여줄때 다음과 같은 형식으로 시간이 출력되는 것을 본 적이 있을 것이다. 방금 전 3분 전 1시간 전 3일 전 2022년 2월 16일 07:00 이런 형식으로 시간을 출력할때 유용하게 사용하는 라이브러리가 date-fns다. 아래 링크에서 더욱 다양한 기능을 확인할 수 있다. Modern JavaScript Date Utility Library date-fns provides the most comprehensive yet simple and consistent toolset for manipulating JavaScript dates in a browser & Node.js. date-fns.org date-fns 라이브러리 설치 및 사용 아래 ..

UUID란? UUID는 범용 고유 식별자(universally uniqute identifier)로써, 표준으로 사용되는 고유 식별자 형식이다. UUID는 4가지 버전이 있는데, 일반적으로 랜덤하고 고유한 식별자를 생성할 때는 v4를 많이 사용한다. UUI 설치 및 설정 UUID를 사용하려면 아래 명령어를 통해 라이브러리를 설치해야 한다. $ yarn add uuid 이 라이브러리는 Node.js의 crypto 기능을 사용하는데, 리액트 네이티브에서는 이 기능이 기본적으로 내장되어 있지 않기 때문에 react-native-get-random-values라는 라이브러리를 설치해 호환시켜야 한다. $ yarn add react-native-get-random-values $ npx pod-install 라이..

TextInput에 내용이 많아졌을때 기본적으로 보여줄 수 있는 줄 수를 초과할 경우, 안드로이드에서는 별 문제없이 스크롤할 수 있지만, iOS에서는 하단 내요이 잘리게 된다. 따라서 KeyboardAvoidingView로 컴포넌트 내부의 내용을 감싸줘야 작성한 내용이 엄청 길어져 줄이 많아졌을 때도 문제없이 글을 작성할 수 있다. KeyboardAvoidingView를 적용하지 않고 많은 내용을 작성했을때 iOS의 화면을 확인해보겠다. 키보드가 작성한 내용을 가리는 것을 확인할 수 있다. 이번엔 KeyboardAvoidingView를 적용해보자. import React from "react"; import { KeyboardAvoidingView, Platform, StyleSheet } from "r..

useRef란? useRef는 함수 컴포넌트에서 컴포넌트의 래퍼런스를 선택할 수 있게 하는 Hook다. 간단히 선택자라고 생각하면 될 것 같다. TextInput 포커스 하기 아래는 제목을 입력하고 Enter를 누르면 하단 내용으로 포커스를 이동시키는 예제 코드다. import React, {useRef} from "react"; import { View, StyleSheet, TextInput } from "react-native"; function WriteEditor({title, body, onChangeTitle, onChangeBody}) { const bodyRef = useRef(); return ( { bodyRef.current.focus() }}/> ) } ... 이렇게 ref를 생성..

Context API란? Context API는 리액트에 내장된 기능으로 Props를 사용하지 않아도 특정 값이 필요한 컴포넌트끼리 쉽게 값을 공유할 수 있게 해 준다. 주로 프로젝트에서 전역 상태를 관리할 때 많이 사용한다. 새로운 Context를 만들 때는 createContext 함수를 사용한다. import { createContext } from "react"; const LogContext = createContext('Hello'); export default LogContext; 이렇게 Context를 만들면 LogContext.Provider라는 컴포넌트와 LogContext.Consumer라는 컴포넌트가 만들어진다. Provider는 Context 안에 있는 값을 사용할 컴포넌트들을 감..

머티리얼 하단 탭 내비게이터(Material Bottom Tab Navigator) 설정 및 사용법 머티리얼 하단 탭 내비게이터(Material Bottom Tab Navigator)은 이 전 글에 소개한 머터리얼 상단 탭 내비게이터와 비슷한 내비게이터인데, 큰 차이점은 이 내비게이터는 하단에만 나타나며, 활성화된 탭에 따라 전체 탭의 배경색을 변경할 수 있다. 머티리얼 하단 탭 내비게이터를 사용하기 위해 아래 명령어를 통해 라이브러리를 설치해야한다. $ yarn add @react-navigation/material-bottom-tabs react-native-paper $ cd ios $ pod install $ cd .. $ yarn ios $ yarn android react-native-pape..

머티리얼 상단 탭 내비게이터(Material Top Tab Navigator) 설정 및 사용법 머티리얼 상단 탭 내비게이터(Material Top Tab Navigator)는 하단 탭 내비게이터와 유사하다. 이 내비게이터는 탭을 상단에 위치시킬 수 있고, 탭을 누르면 구글의 머터리얼 디자인 특유의 물결(ripple) 효과가 나타난다. 화면을 스와이프하는 형태로 우측/좌측 탭으로 전환할 수도 있다. 머티리얼 상단 탭 내이게이터를 사용하려면 아래 명령어를 통해 라이브러리를 설치해야 한다. $ yarn add @react-navigation/material-top-tabs react-native-tab-view react-native-pager-view $ cd ios $ pod install $ cd .. ..

하단 탭 내비게이터(Bottom Tab Navigator) 설정 및 사용법 하단 탭 내비게이터(Bottom Tab Navigator)는 이름 그대로 하단에 탭을 보여주는 내비게이터다. 트워터, 유튜브, 인스타 등 많은 앱에서 하단 탭을 사용하고 있다. 하단 탭 내비게이터를 사용하기 위해선 아래 명령어를 사용해 라이브러리를 추가해야 한다. $ yarn add @react-navigation/bottom-tabs $ cd ios $ pod install $ cd .. $ yarn ios $ yarn android 사용 예제 코드 import React from 'react'; import {NavigationContainer} from '@react-navigation/native'; import {crea..