Just Do IT!

useMutation이란? React-Query의 hook 중 하나로 DB에 추가/수정/삭제 발생시킬 때 사용하는 hook이다. database에 직접 접근해서 data를 변경시킬 수 있다. mutation key, mutation 함수, 옵션 객체를 인자로 받는다. 적용 방법 const { isLoading: isLoadingEditing, mutate: reviseReview } = useMutation( ["editReview", review.id], (body) => editReview(body), { onSuccess: () => { console.log("수정성공"); }, onError: (err) => { console.log("err in edit:", err); }, } ); 적용 예시..

무한 스크롤이란? 스크롤이 기존 렌더링된 리스트 마지막 부분 또는 그 근처에 도달했을 때 새로운 리스트를 추가로 더 불러오는 인터랙션 FlatList의 onEndReached props를 이용하여 스크롤이 리스트의 마지막 부분에 도달했을 때 trigger 되었을 때 추가로 fetch 처리한다 기존의 배열 리스트에 추가로 불러온 배열을 합쳐셔 리렌더링하는 방식으로 구현된다 React-Query의 useInfiniteQuery 를 사용하면 간편하게 무한스크롤 구현이 가능하다 React-Query의 useInfiniteQuery 적용 const { fetchNextPage, // 다음 페이지 fetch hasNextPage, // 다음 페이지가 존재하는지 true/false isFetchingNextPage,..

React-Query란? server state, 비동기 데이터를 관리하기 위한 라이브러리 useQuery hook 안에서 API get 요청을 담당하고, API 요청 결과 및 다양한 상태들을 바로 사용할 수 있다 Redux, thunk 사용하지 않아도 되서 훨씬 간결하다 한 번 API 요청 시 queryKey가 API 요청 결과를 cache에 저장하고, caching된 API 요청은 cache memory에서 빠르게 불러온다 key-value 구조로 되어 있다. 설치하기 $ npm i react-query --save $ yarn add react-query App.js 에서 최상위 컴포넌트 감싸주기 ... import { QueryClient, QueryClientProvider } from "rea..

ScrollView와 FlatList의 차이 ScrollView 모든 리스트들을 한번에 렌더링해야 하기 때문에 리스트가 많을수록 성능이 저하된다 출력해야 하는 데이터가 고정적이고 많지 않을 때 간단하게 사용할 수 있는 컴포넌트 FlatList 화면에 보이지 않는 리스트들은 메모리에서 제거하고 화면에 보이는 부분들만 렌더링 리스트가 많이 있어도 성능 저하를 최소화 무한스크롤 적용에 적합하다 JS에서의 map 함수 역할과 비슷하나 더 많은 기능을 내포하고 있어 react-native에서 많이 쓰이는 컴포넌트 데이터의 길이가 가변적이고, 데이터의 양을 예측할 수 없는 경우 (API를 통해 외부에서 크기를 알 수 없는 데이터를 가져오는 경우)에 사용하기 적절 FlatList로 리팩토링하기 top rated mo..

영화 정보 API 사용하기 심화 주차 강의가 영화 리뷰 앱 만들기인데, API 사용하는 방법이 나중에도 필요할 것 같아서 정리한다. 이번에 필요한 API가 영화 정보였지 다음에는 다른 API가 필요할 수 도 있으니까...! 영화 정보 API 사이트 들어가기 https://www.themoviedb.org/ The Movie Database (TMDB) Welcome. Millions of movies, TV shows and people to discover. Explore now. www.themoviedb.org 이 사이트에 들어가 회원가입을 하고 로그인을 해야 한다. 프로필 > 설정 > API를 클릭하면 앱 설정을 우선 해야 하는데, 대충 작성해도 곧바로 API Key가 생성된다. 여기서 생성되는 ..

react-navigation란? Routing and navigation for Expo and React Native apps. (출처: 공식문서) react에서 router를 써서 다른 페이지로 이동했던 것처럼, 앱 내에서 다른 페이지로 넘어가게 만든다. 설치 방법 $ npm install @react-navigation/native $ npx expo install react-native-screens react-native-safe-area-context 터미널에 두 명령어를 입력해서 설치해야 한다. NavigationContainer 앱 상태를 관리하고 최상위 내비게이터를 앱 환경에 연결하는 역할 가장 최상위에서 모두 감싸서 이용한다. (import 해야 사용할 수 있음) 공식문서 https:..