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:..

firebase 연동하기 지난주에는 asyncstorage를 이용했었다면, 이번에는 firebase를 연동해서 투두리스트를 만드는 강의를 들었다. 처음에는 뭔가 오류가 계속 났는데 공식 문서도 보고 오타도(ㅎ) 고쳐보니 잘 연동되고 신기한 경험이었다. 나중에 프로젝트 때도 유용할 것 같아서 블로그에도 미리 남겨둔다. firebase 설치하기 npm instsall firebase --save 터미널에 위 명령어 입력해서 react native 프로젝트에 firebase 패키지를 설치한다. firebase.js 파일 만들기 (firebase 연동) 미리 firebase에서 프로젝트를 생성하고 프로젝트를 생성함에 따라 나오는 SDK 설정을 연동해야 한다. // firebase.js import { initi..

AsyncStorage란? 암호화되지 않은 비동기적인 데이터를 관리하는 Key-Value 시스템 앱 전역에서 사용 가능하며 LocalStorage 대신에 사용해야 한다 앱이 다운되더라도 기존 저장된 변수 및 세팅 사항들이 보존된다 키-값 형태로 보관됨에 있어 저장되는 값은 무조건 문자열로 취급되어야한다 저장할때 JSON.stringfy() 사용 가져올때 JSON.parse() 사용 비동기 처리를 위하여 async/await과 에러 핸들링을 위해 try-catch 문을 써준다. key 값이 공백 또는 null 일 때에는 error를 throw 해주고, value 가 존재하지 않는다면 null을 반환하도록 한다. Install npm install @react-native-async-storage/async..

Expo란? 리엑트 네이티브로 하는 개발을 쉽게 할 수 있게 해준다. 리엑트 네이티브를 위한 set-up이 미리 구성되어있다. native 파일들을 사용자에게서 숨겨놓고, 알아서 관리해주는 툴 Expo의 장점 Expo는 개발 시작하기가 간편하다. 리액트 네이티브를 위한 set up이 미리 구성되어있기 때문이다. Expo는 배포하기가 매우 편하다. 처음 배포 후, 업데이트 버전은, Expo에 publish만 해주면, Expo가 알아서 업데이트 해준다. Expo의 단점 Native 코드 수정은 불가능 Expo에서 제공하는 API만 사용가능하다. 필요한 기능이 없을 경우, 모듈을 만들어 사용할 수 없다. Expo로 React-Native 프로젝트 생성하기 계정 생성하기 (https://expo.dev/sign..