TIL_230105_ React Native 심화, React Query

내일배움캠프 4기 스파르타코딩 React B반

---

📒 오늘의 공부

1. React Native 심화 강의

React query

알게 된 것

데이터 불러오기(fetch)

• useQuery
  const { isLoading, error, data } = useQuery('repoData', fetcher)

• key('repoData)와 function(fetcher) 필요

• {isLoading, error, data} = 응답 값의 구조분해할당

• server state는 useQuery가 관리하기 때문에 useState 쓰지 않아도 된다.

• alias(별칭) 설정

  • 받아오는 데이터가 여러개 일 때 response(데이터, isLoading 등)에 별칭 설정
    
    

• QueryClient

  • queryClient를 통해 데이터의 모든 캐시 메모리에 접근해 refetch를 할 수 있다.
  • query key는 배열로도 가능해서 배열 중 하나라도 해당이 되면 데이터를 불러올 수 있다.
  • "Movies"라는 공통 키 값을 넣어주고 이걸 이용해 한 번에 refetch 하기
    
    

• params를 통해 moiveId 전달하기

  • useQuery를 통해 queryKey가 getDetail함수로 전해진다.
  • params로 받은 querKey의 두 번째 키값(movieId)가 api에 들어간다.

  

  ---

무한스크롤(Infinite Scrolling)

• 무한 스크롤 적용할 부분(FlatList)에 추가
  onEndReached={fetchMore}
onEndReachedThreshold={1}

  • fetchMore = 함수를 만들어 넣기
    ->1 = 해당하는 스크린 높이(1)에 도달하기 전에 fetch한다는 것

• array method flat()

  • 중첩 배열을 1차원 배열로 만들어준다.
  • 여러번 중첩된 배열의 경우 array.flat(Infinity)로 모두 1차원 배열로 만들 수 있다.

• useInfiniteQuery

  • key, 함수, option(콜백함수)를 가진다.
    
  • 콜백함수의 return 값이 pageParam으로 getUpcoming의 api 인자로 들어간다.

• Top Rated Movies도 infinite scroll 적용해보기

  • flat List에 넣는 fetchMore 함수에 이미 upcoming의 method 함수가 있어 top rated는 alias를 썼다.
    
  • fechMore 함수엔 if로 구분했다.
    

    ---

  • 더 간단하게 표현해보기
    
  • await Promise.all([fetchNextPage(), fetchNextTR()]); 이렇게도 바꿔봤는데 이렇게 하는 건 비효율적. 둘 중에 하나만 있어도 fetch 두 개가 모두 실행되어 비효율적. 원래 코드로 돌아감

  ---

영화 리뷰 CRUD

• firebase native 기초 todoList firebase 연결하는 부분 참고해서 firebase부터 연결하기

  • React native Movies 프로젝트 생성 후 Authentiacation(email login), Friestore Database 연결
  • firebase.js 파일 생성, key 입력

  ⭐ Firebase Database 규칙 true로 바꾸기!

• setOptions

  • navigation의 option 중 하나로 특정 컴포넌트에 옵션을 주고 싶을 때 사용
    
  • Stacks에서 공통 적용되는 로그인(headerRight)을 Login screen에서 없애는 부분

• useRef()
  -로그인, 회원가입 시 input에 document~focus()를 썼던 것처럼 쓸 수 있다.

• useMutation

  • useQuery처럼 key(배열 가능), 함수, option(콜백함수)를 받음

  ---

문제 및 해결

• 튜터님 코드를 다 긁어와서 경로만 내 폴더에 맞게 바꿨는데 detail, my page로 갈 때 같은 오류가 뜬다.
  Render Error Text strings must be rendered within a <Text> component
  • Detail, My, 등 다른 페이지에서 스타일컴포넌트를 Text로 다 바꿔봐도 같은 오류
  • Tabs에선 잘 나오는 걸 봐서 Stacks.jsx의 문제
  • 텍스트 하나가 잘못 들어가 있는 것 같은데 Stacks.jsx를 튜터님 코드로 바꾸니 정상 작동.
  • 코드 하나하나 비교해보니 이렇게 해놓으니 렌더링 오류가 난 것...
    
  • 오류 메시지에 집중해서 rendering부분을 더 자세히 볼 것. 오류 메시지에 이미 Text라고 다 나와 있었는데 Text가 컴포넌트로 감싸지지 않은 부분이 있는지 잘 살펴보면 됐을 것.

문제 및 해결

• my screen에서 내가 작성한 댓글을 불러오는데 오류
  • Uncaught Error in snapshot listener: FirebaseError: The query requires an index
  • detail screen에서는 where만 빠진 똑같은 코드로 잘 불러와지는데..
  • firebase에서 색인을 만들라고 해서 수동으로 만들었다.
    
    
  • 이렇게 둘 다 만들고 나니 My screen에서내가 작성한 댓글이 잘 불러와졌다.
  • 어느 부분이 해당 된 건지 궁금해서 복합 색인을 지웠는데 오류가 나서 단일필드부분을 지우고 복합 색인을 다시 생성했다.
  • 복합 색인을 저렇게 설정하니 오류 해결!!

---

알게된 것

• Double Exclamation Marks Operator
  • 느낌표 두 개 연산자는 값이 있을 땐 true, null이거나 undefined일 땐 false로 boolean을 반환해준다.

---

프로젝트 준비

• 주제에 대해 잠깐 얘기 나누고 팀원이 Git repo 생성