react

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 안에 있는 값을 사용할 컴포넌트들을 감..

useNavigation Screen으로 사용 중인 컴포넌트에서는 Props를 통해 navigation 또는 route 객체를 사용할 수 있지만, Screen으로 사용되지 않는 다른 컴포넌트에서는 navigation 또는 route를 Props로 받아와서 사용할 수 없다. 예를 들어 HomeScreen에서 상세보기 버튼을 DetailViewButton 이라는 컴포넌트로 따로 분리해서 사용하고 싶다면 다음 세 가지 방법을 통해 구현할 수 있다. 1. SendMessageButton 컴포넌트에 onPress 함수를 전달 function DetailViewButton({onPress}) { return ; } function HomeScreen({navigation}) { return ( Home naviga..

머티리얼 하단 탭 내비게이터(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..

드로어 내비게이터(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 ( ... ); } 만약 컴포넌트에 라우트 파라미터값을 넣어야 한다면 아래와 같이 함수로 설정..