Jun's TID

useMemo는 React의 Hook 중 하나로, 성능 최적화를 위해 메모이제이션된 값을 반환한다. 이 Hook은 계산 비용이 많이 드는 함수의 결과값을 재사용함으로써, 불필요한 재계산을 방지하고 애플리케이션의 효율성을 높이는 데 사용된다. useMemo는 두 개의 인자를 받는데, 첫 번째 인자는 메모이제이션할 값을 생성하는 함수이며, 두 번째 인자는 이 함수가 의존하는 값들의 배열이다. 의존성 배열의 값이 변경될 때만 함수가 실행되어 값을 재계산하고, 그렇지 않으면 이전에 메모이제이션된 값을 재사용한다. 예제와 함께 알아보도록 하자. 아래는 useMemo를 사용하는 간단한 예제이다. 이 예제에서는 사용자의 목록을 필터링하는 비용이 많이 드는 연산을 메모이제이션한다. import React, { useS..

react-native-calendars는 React Native 애플리케이션에서 달력을 표시하고 관리할 수 있는 유용한 라이브러리이다. 이 라이브러리는 다양한 달력 레이아웃과 기능을 제공하여 사용자 정의 달력, 마커, 주간 달력 등을 구현할 수 있다. 바로 예제 코드와 함께 알아보자. npm install react-native-calendars --save yarn add react-native-calendars 설치가 완료되면, React Native 프로젝트에 바로 사용할 수 있다. - 기본 달력 사용하기 기본 달력을 구현하는 것은 간단하다. 다음은 기본 달력을 표시하는 예제 코드이다. import React from 'react'; import {View} from 'react-native'; ..

React Native에서 useWindowDimensions 훅은 현재 화면의 너비와 높이를 가져오는 데 사용된다. 이 훅은 컴포넌트가 렌더링될 때 화면의 크기를 제공하며, 화면 크기가 변경될 때마다 이를 감지하여 컴포넌트가 적절히 반응하도록 할 수 있다. 이는 반응형 디자인을 구현할 때 매우 유용하다. useWindowDimensions는 Dimensions API와 비슷하지만, 컴포넌트 기반의 훅 형태로 제공되어 더 간단하고 직관적인 사용이 가능하다는 장점이 있다. 화면의 방향이 바뀌거나 다양한 화면 크기를 가진 장치에서의 호환성을 고려할 때, 이 훅을 사용하면 효과적으로 UI를 조정할 수 있다. 예제 코드와 함께 알아보자. import React from 'react'; import { View,..

react-native의 Animated 라이브러리는 애니메이션을 구현하는 데 사용되며, 여러 가지 유용한 기능을 제공한다. 이 라이브러리는 다양한 유형의 값과 애니메이션을 생성하고, 뷰에 연결할 수 있게 해준다. react-native에서 기본으로 제공되는 라이브러리기 때문에 따로 설치를 할 필요는 없다. 예제 코드와 함께 확인해보자. 예제 1: 페이드 인 애니메이션 import React, { useRef, useEffect } from 'react'; import { Animated, Text, View } from 'react-native'; const FadeInView = (props) => { const fadeAnim = useRef(new Animated.Value(0)).current;..

react-native에서 date-fns 라이브러리는 리액트에서 날짜 및 시간을 매우 쉽고 편리하게 다룰 수 있게 해주는 라이브러리이다. 이 라이브러리는 다양한 날짜 관련 기능을 제공하며, 사용하기 쉽고 가벼운 구조를 가지고 있다. 자세한 사용법은 여기에서 확인하자. 설치는 아래와 같이 설치한다. npm install date-fns --save # or yarn add date-fns 바로 한번 예제 코드를 알아보자. 1.현재 날짜와 시간 표시 import { format } from 'date-fns'; const currentDate = format(new Date(), 'yyyy-MM-dd HH:mm:ss'); console.log('현재 날짜와 시간:', currentDate); 이 코드는 d..

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

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