본문 바로가기
반응형

개발로그/ReactNative47

React Query 를 사용해보자. : useQuery React Query 설치 및 기본 사용방법 (useQuery)Hooks 를 이용해서 Fetch 데이터에 접근 할 수 있게 해주고, 데이터를 알려준다. 또한 Loading stats, caching , 무한 스크롤 지원함. 설치 $ npm i react-query # or $ yarn add react-query 사용방법 step 01. import 해준다. queryClient 를 생성한다. 로 app(데이터를 사용할 컴포넌트) 을 감싼다. //App.js import { QueryClient, QueryClientProvider, } from 'react-query' // Create a client const queryClient = new QueryClient() function App() { r.. 2023. 1. 25.
리스트를 표현하는 ScrollView VS FlatList 어느것을 써야하는가. 출처 : https://reactnative.dev/docs/scrollview , https://reactnative.dev/docs/flatlist 리스트를 표현하는 ScrollView VS FlatList 어느것을 써야하는가. 여러가지 항목을 리스트로 구현하고자 할때, ScrollView와 FlatList 를 고려하게 된다. 각각의 특징과 장단점을 알아보고 선택할 수 있으면 좋겠다. 위 스크린 샷은 ScrollView와 FlatList로 각각 구현해보았다. ScrollView 에는 자식으로 ScrollView, Swiper,Text 등 여러가지를 가질 수 있다. 그리고 동시에 모든 자식컴포넌트를 렌더링한다. 모든 자식컴포넌트를 매번 동시에 렌더링하므로 무한 리스트나 많은 양의 데이터를 표시할 경우 .. 2023. 1. 24.
** BUILD FAILED ** Unable to find expo in this project - have you run yarn / npm install yet? > netflify@1.0.0 start > expo start Starting project at /Users/ju_yeonkim/ReactNativeProject/netflify05 Unable to find expo in this project - have you run yarn / npm install yet? 갑자기 위와 같은 에러와 함께 npm start 가 되지 않는다면, 찾아낸 두가지 원인 1. expo 라이브러리 중 설치되지 않은 것이 있는지 확인해본다. 확인 방법은 import하여 사용한 라이브러리가 node_modules 폴더에 잘 있는지 보면 된다. 없다면 설치해준다. 2. expo 버전의 불일치 나의 경우였는데, 나는 왜인지 expo 1.0.0 버전을 사용중이었다. 그래서 pack.. 2023. 1. 23.
** BUILD FAILED ** SDK "iphoneos" cannot be located 해결방법 (xcode 설정 포함) How to Fix SDK "iphoneos" cannot be located ios 에서 pod install 이 실패하거나 빌드에 실패하였다면, 아마도 xcode 를 다운그레이드 해봤을지도 모르겠다. 혹시나 xcode 를 실수로 업데이트 하여서 버전이 13.3 이상이라면 아래 글을 참조해 다운그레이드를 추천한다. 2023.01.11 - [분류 전체보기] - ** BUILD FAILED ** CompileSwift normal x86_64 (in target 'ExpoModulesCore' from project 'Pods') ** BUILD FAILED ** CompileSwift normal x86_64 (in target 'ExpoModulesCore' from project 'Pods') 제안된.. 2023. 1. 22.
** BUILD FAILED ** Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). 해결( 캐쉬삭제 방법 정리) 발생한 에러 Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 11): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient, RCTEventEmitter. A frequent cause of t.. 2023. 1. 21.
알면 도움되는 기능들. 스타일 상속 / vscode 이모지 단축키 / .toLocaleString() 을 android 환경에서도 사용하기 vscode 이모지를 불러와 사용해보자.(단축키) 단축키는 ctrl+command+space 여러가지 이모지를 찾아 쓸 수 있다. CSS 스타일은 상속받아 재사용할 수 있다. const Wrapper = styled.View` flex-direction: row; height: 100%; width: 90%; margin: 0 auto; justify-content: space-around; align-items: center; `; // Wrapper의 모든 css를 가지며 flex-direction은 재정의한다. const Wrapper_col = styled(Wrapper)` flex-direction: column; `; styled( 스타일 컴포넌트 이름) 으로 선언함으로써 모든 css 속성을 .. 2023. 1. 20.
BlurView 에서 intensive 적용안됨 또는 android/ios 모두 적용 하는 해결방법 BlurView 에서 intensive 적용안됨 또는 android/ios 모두 적용 하는 해결방법 자료출처 : https://reactnative.directory/?search=swiper 해결방안 결론부터 말하자면, react-native-blur 를 사용하는 것입니다. 그리고 android / ios 모두 적용해야하는 앱이라면 react-native-swiper 와의 조합을 추천합니다. import { BlurView } from "expo-blur"; // 대신 import { BlurView } from "@react-native-community/blur"; 사용예시 모듈 설치 (react-native-swiper) npm i react-native-swiper --save 모듈 설치 (@r.. 2023. 1. 19.
[ReactNative] open api 로 데이터 가져오기 01 - using fetch() , useState() useState() , Fetch() 를 이용한 데이터 가져오기 movie 컴포넌트는 useState()와 Fetch() 함수를 사용하여, api를 호출하고 그 결과에 따라 Loader 또는 Container 컴포넌트를 반환한다. 가장 하단에 컴포넌트 전체 코드가 있다. 데이터 가져오기 movie 컴포넌트 작성 예제 movie 컴포넌트 주요 코드 const getNowPlaying = async () => { const { results } = await ( await fetch( `APIURL` ) ).json(); setLoading(false); setNowPlaying(results); }; useEffect() 로 getNowPlaying();을 호출한다. useEffect(() => { get.. 2023. 1. 16.
반응형

티스토리툴바