qcoding

* 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 를 만든다음에 사용하는 컴포넌트 전체..

Scroll View / Flat list 비교 --> 는 렌더링 시 모든 것을 한번에 렌더링한다. 많은 양의 리스트가 있을 경우 성능이 저하되는 문제를 야기할 수 있음. --> 의 경우 항목이 나타나려고 할 때 렌더링을 할 수 있어 메모리의 사용량을 줄일 수 있으며, 여러열이나 무한 스크롤 로딩과도 상호작용하기 쉽다. Flast list 사용법은 data props에 배열에 해당하는 data를 넣고 , renderItem props에 실제 렌더할 컴포넌트를 넣어준다. map을 사용하는 것과 동일하게 key를 만들어 주어야 되고 이는 keyExtractor를 통해서 가능하며 형태는 "string"을 갖는다. ItemSeparatorComponent={() => } //와 같이 렌더링되는 component..

1) scroll view를 사용하기 위해서 react native directory 에서 react-native-web-swiper 를 사용하였다. 기본적인 사용법은 git hup에 나와있을 것이고 https://github.com/reactrondev/react-native-web-swiper GitHub - reactrondev/react-native-web-swiper: Swiper-Slider for React-Native and React-Native-Web Swiper-Slider for React-Native and React-Native-Web - GitHub - reactrondev/react-native-web-swiper: Swiper-Slider for React-Native an..

- Theme를 변경하기 위해 기본적으로 background color / text color들을 변경한다. 이걸 위해서 $(props=>props.lgiht?: "light":"dark") 이런 식으로 매번 모든 컴포넌트에서 사용하면 코드가 복잡해지고 헷갈리게 된다. 이를 위해서 를 App.js에서 전체를 묶어줘서 어디에서나 받을 수 있게 사용한다. 1) styled 되어있는 theme js를 만든다. export const lightTheme={ BgColor:"=", textColor:"", } export const darkTheme={ BgColor:"#", textColor:"#", } 2) App.js에서 받아온다. import { lightTheme,darkTheme } from './st..

1) 결합방법 - 1-1) Tab 안에 Stack 집어 넣는 방법 : 많이 사용하진 않음 - 1-2) root 라는 native stack navigator를 만들고 그안에 Tab / Stack을 집어 넣는방법 이떄 root 에서 headerShown : false 를 해주어야 header가 2개가 안생김 이때 navigation.navigate를 할 때 Tabs에서 Stack으로 navigation간에 넘어갈 수가 없음. navigation.navigate("Stack"(Stack nav이름 ), {screen : "Stack nav 안에 있는 component name" } ) 으로 사용가능 반대도 가능함 stack --> tab ex) onPress={()=>{navigate("Stack",{scr..