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..

역시... 연초라서 그런지 시간이 정말 금방금방 간다. 벌써 누리와 같이 지낸 지 3주가 다 되어가고 있다. 누리도 이제는 정말 자기만의 루틴이 생긴 건지, 매일 아침 일어나 보면 주방 혹은 거실에 놔둔 패드에 지도가 그려져 있다. 산책을 갔다오면 거의 매번 통조림 1/4 캔을 사료에 섞어주니까, 밥도 규칙적으로 잘~ 드신다. 하나 좀 걸리는건, 누리가 발 닦는 것도 굉장히 싫어하고, 이빨에도 음식이 많이 끼는 거 같은데 양치도 못하는 상황이라 애가 슬슬... 꼬질꼬질 누리가 되어간다. 이제는 진짜 목욕을 한 번 시켜야 할 거 같은데, 당연히.. 쉽지 않을 여정이 될 거 같아 주말에 한 번 큰맘 먹고.. 맛난 간식 하나 준비해두고 하려고 한다. 누리가 이제는 내가 엄~청 편해진건 정말 좋은데, 약간의 분..

어제 작성한 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..