React Native 앱 제작에 자주 활용되는 모달, Event, Splash 기능 활용 해보기 모달 만들기 모달은 컴포넌트를 만들어놓고 visible Props를 활용해서 보여주기/숨기기 해서 활용함 사용 예제) (...) * Props 설명 - visible : 모달창 보여줄 지 결정하는 Props (true/false) - transparent : 뒤에 배경 살짝 보이게 투명도 넣을지 말지 - animationType : 트랜지션 효과 지정 (slide - 아래에서 위로 슬라이드, fade - 서서히 나타나기, none - 아무효과 없음) - onRequestClose : 안드로이드 뒤로가기 버튼 눌렀을 때 호출되는 함수 * iOS에서 모달 : ActionSheetIOS 함수로 대체함 Event ..
Firebase 서비스의 Database, Firestore 목록 조회 및 보안 설정 방법 확인 Firestore 목록 조회하기 firestore의 collection에 get 함수를 호출하면 해당 컬렉션의 QuerySnapshot 객체 반환 -> 전체 정보 담고 있음 : doc 이라는 객체의 배열 형태로 담겨 있음. 호출 예제) const postsCollection = firestore().collection('posts'); const snapshot = await postsCollection.get(); snapshot.docs.map((doc) => ({ id: doc.id (...) })); //위와 같은 형태로 사용 Firestore 목록 정렬 및 개수 제한 collection에 orderb..
Google Firebase로 서버 없이 backend 서비스 활용하기 (BaaS : Backend as a Service) Firebase 가입하기 - 사전 준비 : Google 계정 보유 및 로그인 - 접속 주소 : https://firebase.google.com Firebase | Google’s Mobile and Web App Development Platform Discover Firebase, Google’s mobile and web app development platform that helps developers build apps and games that users will love. firebase.google.com - 콘솔 접속 후, 프로젝트 만들기 버튼 눌러서 프로젝트 생성..
화면에 달력을 표시하고, 이를 수정하는 예제 학습하기 사전 설치 라이브러리 yarn add react-native-calendars yarn add react-native-modal-datetime-picker @react-native-community/datetimepicker 설치 이후 시뮬레이터 재기동 필수 달력에 표시하기 달력에 특정 일자를 선택한 표시(selected), 체크한 표시(marked) 남기는 예제 import React from 'react'; import {Calendar} from 'react-native-calendars'; import {StyleSheet} from 'react-native'; function CalendarView() { const markedDates =..
배열을 효과적으로 사용하기 위한 Array.from 문법 알아보기 Array.from 기본 예제 유사 배열 객체를 배열로 변경해 줌 1. 문자열 입력 : 문자 배열로 반환 2. 배열, 함수 입력 : 각 배열 요소에 함수를 적용한 결과 배열 반환 Array.from('Tei'); //["T", "e", "i"] Array.from([1, 2, 3], x => x + x); //[2, 4, 6] 3. {length:20} 객체 입력 : 길이 20의 배열로 반환 Array.from( {length: 20}, // 유사배열 () => Array(10).fill(0) // 각각의 배열에 적용할 함수 ); - 결과 : 20 * 10 짜리 2차원 배열에 모두 0을 채운 배열 반환
Animated 컴포넌트를 활용한 애니메이션 효과 적용하기 Animated 객체를 활용한 애니메이션 효과 구현 Value를 만들고 해당 Value에 시작값, 종료값, 시간 등을 부여하여 변경 컨트롤을 함 이를 위해, useRef를 활용하여 컴포넌트 생성~종료까지 레퍼런스 해둠 활용 예제 - Animated 객체 생성 및 초기값 설정) import {Animated} from 'react-native'; function Sample() { const animation = useRef(new Animated.Value(1)).current; } 활용 예제 - Animated 객체 적용) 활용 예제 - Button을 활용한 Animated 객체 컨트롤) { Animated.timing(animation, { ..
Pressable, useRef, uuid, date-fns 활용 학습 Pressable 컴포넌트 이전 Touchable* 컴포넌트에서 기능을 강화한 버전의 컴포넌트 Pressable 컴포넌트 주요 Props) - android_ripple : 안드로이드에서 클릭시 물결효과를 주는 설정 - pressed : 눌렀는지 여부를 리턴하여 동적인 스타일 적용을 하도록 함 - onPress : 눌렀을 때 호출할 함수 등록 사용 예시) function TransparentCircleButton({name, color, hasMarginRight, onPress}) { return ( [ styles.iconButton, Platform.OS === 'ios' && pressed && { backgroundColor..
Navigation이 서로 다른 컴포넌트 간 데이터 공유를 위해 사용되는 Context API 사용하기 Context 사용 기본 개념 - createContext : 새로운 Context를 생성하는 함수 - Context.Provider : Context를 사용하기 위해 범위 및 값을 설정 - Context.Consumer : Context를 데이터를 활용하기 위해 값을 불러오는 함수 createContext 예시 - './contexts/LogContext.js 에 작성) import { createContext } from 'react'; const LogContext = createContext(); export default LogContext; Context.Provider 예시) import ..
