네이티브

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

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가 먼저 등록되어야 한다. 아래 코드는 컴포..