Jun's TID

Material Top Tabs Navigator 는 직전에 다뤘던 bottom tab navigator와 유사하지만, 탭을 상단에 위치시킬 수 있고 스와이프 제스쳐로 탭을 이동시킬 수 있다는 장점이 있다. 네비게이터는 지금까지 많이 다뤘으니, 바로 한번 예제 코드를 작성해보자. 우선, 설치부터 하자. yarn add @react-navigation/material-top-tabs@next yarn add react-native-pager-view 새 라이브러리를 설치 후에 반드시 빌드를 다시 해주자. 안그럼 제대로 동작하지 않는 경우가 많다. 직전 포스팅에서 작성했던 MainScreen.js에서 bottom-tab이 아닌 Material Top Tabs Navigator 을 사용하도록 수정한다. ◎ M..

요즘 가장 많이 보이는 Bottom tab navigator이다. 바로 시작해보자. 우선, 동일하게 라이브러리를 설치해주고 yarn add @react-navigation/bottom-tabs@next Vector 아이콘 사용을 위한 라이브러리 설치와 셋팅도 진행해주자. yarn add react-native-vector-icons ◎android/app/build.gradle 최하단 (...) project.ext.vectoricons = [ ionFontNames: ['MaterialIcons.ttf'] ] apply from: "../../node_modules/react-native-vector-icons/fonts.gradle" ◎ios/프로젝트 이름/Info.plist 최하단 (....) UI..

좌측 또는 우측에 사이드바를 만들고 싶을 때 사용하는 네비게이터이다. App 환경에서 보통 사이드바를 Drawer이라고 부르기 때문에 Drawer navigator라고 부르는 거 같다. Drawer navigator를 사용하기 위해서는 우선, drawer-navigator, gesture-handler, native-reanimated 이렇게 3가지 라이브러리들을 설치해야 한다. yarn add @react-navigation/drawer@next react-native-gesture-handler react-native-reanimated - react-native-gesture-handler: 사용자의 제스처 인식을 위한 라이브러리 - react-native-reanimated: 리액트 네이티브에 내..

react-navigation 에서는 타이틀 영역을 Header라고 부른다. 이 헤더를 커스터마이징 하는 방법을 한 번 알아보자. 직전 포스팅의 예제를 그대로 사용한다. 1. Props 사용 ◎ App.js import React from 'react'; import HomeScreen from './screens/HomeScreen'; import DetailScreen from './screens/DetailScreen'; import {createNativeStackNavigator} from '@react-navigation/native-stack'; import {NavigationContainer} from '@react-navigation/native'; const Stack = create..

Native Stack Navigator Stack 자료구조와 같이 새로운 주소로 이동할 때는 push, 뒤로 갈 때는 pop 하는 방식으로 작동하는 네비게이터이다. 네이티브 스택 네비게이터말고도 Drawer, Bottom Tabs, Material Top Tabs 등의 네비게이터들이 있지만, 이 네이티브 스택 네비게이터가 가장 흔히 사용되며, 안드로이드의 Fragment / iOS의 UINavigationController를 사용하여 일반 데이티브 앱과 정확히 동일한 방식으로 화면을 관리한다. 설치는 마찬가지로 yarn으로 하면 된다. yarn add @react-navigation/native-stack@next 전환할 2개의 화면을 미리 만들고, 네이티브 스택 네비게이터를 한 번 실습해보자. ◎ D..

react-native에서는 여러 화면으로 구성된 App을 만드려면 네비게이션 관련 서드파티 라이브러리를 사용해야 한다. 일반적으로 가장 많이 사용되는 라이브러리가 react-navigation이라는 리액트 네이티브 커뮤니티에서 관리하는 라이브러리이다. Docs: https://reactnavigation.org/docs/getting-started/ Getting started | React Navigation What follows within the Fundamentals section of this documentation is a tour of the most important aspects of React Navigation. It should cover enough for you to kno..

어제 작성한 todoList App이 종료됐다가 다시 켜져도 이전에 데이터를 가지고 있을 수 있도록, AsyncStorage를 적용하여 간단한 데이터를 가지고 있을 수 있도록 해보자. 기존 코드를 다시 작성하지는 않으려고 하니, 기존 코드를 확인하려면 여기로 가서 확인하자. 우선, App.js에서 useEffect Hook을 사용하여 아래와 같이 저장과 불러오기 기능을 직접 추가한다. ◎App.js (...) /* 데이터 불러오기 */ useEffect(() => { const load = async () => { try { const rawTodos = await AsyncStorage.getItem('todos'); const savedTodos = JSON.parse(rawTodos); setTod..

AsyncStorage는 React Native에서 제공하는 간단하고 비동기적인 키-값 저장 시스템이다. 이 시스템은 앱 세션 간 데이터를 영속적으로 저장하는 데 주로 사용된다. AsyncStorage는 사용자 설정, 앱 상태 또는 간단한 인증 정보와 같은 작은 데이터를 로컬 장치에 저장하기 위한 것이다. 이 시스템은 암호화되지 않았으므로, 중요한 정보나 대량의 데이터를 저장하기에는 적합하지 않다. AsyncStorage의 주요 메소드로는 setItem, getItem, removeItem, clear 등이 있다. 데이터는 문자열 형태로 저장되므로, 객체를 저장하려면 JSON.stringify를 사용하여 직렬화해야 하며, 데이터를 검색할 때는 JSON.parse를 사용하여 역직렬화해야 한다. 설치는 마찬..

우선, yarn을 사용하여 vector-icons 모듈을 설치하자. yarn add react-native-vector-icons 안드로이드 안드로이드는 react-native 프로젝트 디렉토리 내에 있는 android/app/build.gradle 파일 맨 아래에 아래와 같이 작성하면 된다. ◎build.gradle (...) apply from: file('../../node_modules/react-native-vector-icons/fonts.gradle') iOS terminal 에서 우선, pod를 설치해야 한다. cd ios pod install 이후에 마찬가지로 react-native 프로젝트 디렉토리 내에 있는 ios 디렉토리로 이동하여 info.plist 파일을 찾아 아래와 같이 작성해..

이번에도 마찬가지로 front-end 국민 실습 App인 todoList를 만들어 보려고 한다. 나름 CRUD도 다 들어가야 하고, 기본적으로 react-native app이 어떤 '형식'으로 구성이 되어 만들어지는 지를 확인할 수 있는 아주 좋은 실습이라고 생각은 하지만, 조금 지루한 프로젝트인 건 반박할 수 없는 사실이다. App의 데이터는 react를 공부하면서 다뤘던 useState Hook을 기반으로 하며, StyleSheet를 사용하는 것과 아래 코드에서 확인할 수 있겠지만, 버튼과 같은 컴포넌트들을 터치했을 때 그 터치 효과를 정해줄 수 있는 여러 컴포넌트를 을 사용하는 걸 제외하면 react App 제작과 크게 다르지 않다. 바로 한번 확인해보자. ◎App.js import React, {..