Jun's TID

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하기 위해서 지금까지는 Props를 사용하여 직접 해당 컴포넌트에 옵션으로 전달해주었다. 이러한 방식은 간단한 구조의 프로젝트에는 쉽게 사용할 수 있는 장점이 있지만, 그 구조가 복잡해질 수록 해당 데이터를 추적하는데 가독성이 떨어지고 코드 분석에 오랜 시간이 걸린다는 단점을 가지고 있다. 이럴 때 Context API를 사용하면 Props를 사용하지 않아도 특정 값이 필요한 컴포넌트끼리 쉽게 값을 공유할 수 있게 해준다. 이는 주로 프로젝트에서 전역 상태를 관리할 때 많이 사용한다. 예시를 한번 확인해보자. ◎ contexts/LogContext.js import {createContext} from 'react'; const LogContext = cre..

react-native에서 useFocusEffect는 React Navigation의 기능 중 하나이다. 이 훅은 스크린이 포커스 될 때 특정 작업을 수행하도록 설정하는 데 사용된다. useEffect도 해당 페이지가 렌더링 될 때, 수행하는 작업을 지정할 수 있지만 React Navigation에서 화면을 넘기는 행동 자체는 해당 컴포넌트를 원마운트시키지 않기 때문에 페이지의 변경 "때마다" 지정한 함수가 호출되도록 할 수는 없다. useFocusEffect는 반드시 useCallback과 같이 사용해야 하는데, 그렇지 않으면 페이지 안의 컴포넌트가 리렌더링될 때마다(useState 같은 친구가 업데이트될 때마다) 등록한 함수가 실행되어 버린다. 바로 한번 직전에 만든 MaterialBottomTab..

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를 사용하여 역직렬화해야 한다. 설치는 마찬..