qcoding

* 본 강의는 nomad coder의 react native master class를 듣고 공부를 위해 작성하였습니다. Image 형태에 따른 useAsset 사용법 1) Local Image 사용 (asset 폴더 내에 있을 시) import { Asset } from 'expo-asset'; const [assets] = useAssets([require('path/to/asset.jpg'), require('path/to/other.png')]); if (!assets) { return ; } 2) Image fetch를 통한 uri 사용 시 * 단일 이미지 // useAssets 배열내에 image uri 주소를 넣어준다. const [assets] = useAssets([`uri주소`]) * 여..

*이 내용은 Nomad coder의 React Native Master Class를 듣고 공부하는 글입니다. https://reactnative.dev/docs/layoutanimation LayoutAnimation · React Native Automatically animates views to their new positions when the next layout happens. reactnative.dev -> State가 변하기 전에 layoutAnimation을 선언하여, state가 변경될 때 적용하도록 할 수 있음. 1) import // Android의 경우 UIManager도 불러와야함 import React, { useState } from "react"; import { Layo..

*이 내용은 Nomad coder의 React Native Master Class를 듣고 공부하는 글입니다. 1) Realm SDK DB 사용 https://docs.mongodb.com/realm/sdk/react-native/install/ Install Realm for React Native — MongoDB Realm Docs Home → MongoDB RealmThe MongoDB Realm React Native SDK enables development of React Native applications using the JavaScript and TypeScript languages. React Native enables you to build cross-platform iOS and A..

https://reactnative.dev/docs/panresponder PanResponder · React Native PanResponder reconciles several touches into a single gesture. It makes single-touch gestures resilient to extra touches, and can be used to recognize basic multi-touch gestures. reactnative.dev 1) 스마트폰 화면에서 사용자의 터치입력을 받아서 위치를 변경할 수 있는 Api이다. 아래 처럼 여러 props가 있으며 docs를 통해서 사용법을 확인할 수 있다. Object { "getInteractionHandle": [Functi..

* nomad coder React Native Master class 수강 하면서 정리하는 글 Animation 사용법 1) useRef랑 같이 사용하는 이유 --> UI=Component(state), 로 UI는 state가 변경될 때 component가 다시 렌더링 되게 된다. 이때 리렌더링 되면 값이 초기값으로 적용이 되게 되는데, useRef()를 쓰면 새롭게 렌더링 되지 않고 값이 유지 되게 된다. 애니메이션이 되고 원래 위치로 돌아가는 것을 방지하는 데 사용한다. 즉, 리렌더링 시 값이 초기화 되는 것을 막기 위해서 사용한다. import React,{useState,useRef} from 'react' import { Animated,TouchableOpacity,Easing } from ..

FlastList & React query 사용하여 무한 스크롤을 구현한다. 1) Flat List --> FlastList props 중에서 onEndReached , props를 사용한다. 2) React Query --> react query에서 infinitie-queries를 사용한다. 2-1 ) Fetch 시에 기존에 data 받아오는 구조 변경하기 https://react-query.tanstack.com/guides/infinite-queries Infinite Queries Subscribe to our newsletter The latest TanStack news, articles, and resources, sent to your inbox. react-query.tanstack.c..

React query를 활용한 검색기능 구현 1) react query 를 통해 검색기능을 구현할 때 - 1) 사용자가 검색할 query를 컴포넌트로 전달받아서 어떻게 fetch function에 전달할 것인가? 아래와 같이 useQuery를 사용할 때에 const {isLoading:,data:, isRefetching:}=useQuery(['todos','goMountain'],fetch function) // fetch runction 내에 info라는 정보를 확인하면 useQuery에서 보내는 'key'값이 들어있다. fetch function:(info)=>{ fetch().then((res) => res.json()) ) info 에 들어있는 내용 --> 즉 useQuery를 사용할 때 key..

1) Reat_query https://react-query.tanstack.com/overview Overview Overview React Query is often described as the missing data-fetching library for React, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your React applications a breeze. Motivation Out of the box, React a react-query.tanstack.com 사용법 1) App.js 에 가서 queryClient 를 만든다음에 사용하는 컴포넌트 전체..