Jun's TID

React Native에서 UUID를 생성하고 사용하기 위한 라이브러리는 'Universally Unique Identifier'를 의미하는 UUID를 생성하기 위해 사용되는 도구이다. 이 라이브러리는 데이터베이스, 파일, 객체 등에서 필요한 고유한 식별자를 생성하는 데 유용하다. React Native 환경에서 많이 사용되는 UUID 라이브러리 중 하나는 react-native-uuid이다. 이 라이브러리를 사용하기 위해서는 먼저 프로젝트에 설치해야 한다. npm install react-native-uuid yarn add uuid // 호환성 라이브러리 yarn add react-native-get-random-values 설치 후, 다음과 같은 방법으로 UUID를 생성할 수 있다. import R..

얘도 적어두면 언젠간 쓰겠지...? function WriteEditor({title, body, onChangeTitle, onChangeBody}) { const bodyRef = useRef(); return ( { bodyRef.current.focus(); }} /> ); } - useRef().focus() = 포커스 - useRef().blur() = 포커스 해제 - useRef().clear() = 내용을 모두 비움

언젠가는... 유용하게 쓰려나..? import React from 'react'; import {Platform, Pressable, StyleSheet, View} from 'react-native'; import Icon from 'react-native-vector-icons/MaterialIcons'; const FloatingWriteButton = () => { return ( [ styles.button, Platform.OS === 'ios' && { opacity: pressed ? 0.6 : 1, }, ]} android_ripple={{color: 'white'}}> ); }; const styles = StyleSheet.create({ wrapper: { position: 'ab..

+31!! 벌써 한 달이 되었다. 워낙에 누리가 자다가 먹고... 다시 자다가 조금 걷고 다시 자다가 싸고~ 하는 One 패턴 생활이라서 딱히... 글로 적을 이벤트가 없어서 임보 일기 업데이트가 늦었다. (이래서 무소식이 희소식이라는 말이 있는 건가...ㅋㅋㅋ) 누리는 아주 잘 지내고 있다. 이제 맨날 밥 먹는 시간과 싸는 시간, 싸는 장소가 완전히 고정되어서 돌보기 난이도도 아-주 내려갔다. 다만, 집에 아무도 없으면 분리 불안이 좀 심한 편이라서 어디 잠깐 집을 비우고 오면 도대체 어디에 갔다 왔냐고 방방 뛰면서 아~주 잔소리를 하신다. 열흘 전쯤에 누리가 슬슬 꼬순내를 넘어선 무언가를 풍기시길래... 욕조에 물을 담아서 뜨~끈한 물에 목욕을 시켜드렸다. 의외로 굉장히 얌전하시길래 조금 놀란 것도 ..

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하기 위해서 지금까지는 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..