React native Master Class-Nomadecorders #3.12~3.17

사실 이전 글 안쓰고 강의들어서 복습 겸 캡쳐용으로 다시 들었어요 ㅎ...

그래서 이제서야 하는데 6개 얼른듣고 숙제 하러 가야함 ㅠ

 

#3.12 React Query part One 

- Refactor하거나 고치는 방법을 배워보자

Refactor하거나 고치는 방법을 배워보자

일단 시물레이터 없이 폰으로 테스트 하고싶으면,  터미널에서 run expo  start하시면 됩니다 :)

 

위 사진 처럼 API에서 데이터를 가져오기 위한게 너무 많기 떄문에,,

 

refactor가 된 모습

 

+ React Query로 데이터를 가져와보자

https://react-query.tanstack.com/

React Query

설치 : npm i react-query

still using fetch,,,but!!

 react-query 장점

1) API 사용료 지불 시 fetch는 한번만 하고 싶을 때 유용

2) 서버를 가지고 있다면 fetch를 굳이 매번 화면을 켤때마다 하게 하고 싶지 않을때 유용

3) Query에  Key가 필요한 이유는 react Query가 가지고 있는 caching system 덕임!

   fetcher를 통해 넘어오는 data는 react query의 캐시로 갈거고 key의 이름으로 명명이 된다.

    원한다면 캐시에 접근하고 변형할 수 있는데 어떤 형태인지 알아야함,,,

- 왜 key가 필요한지 알게 된 이유

: TV 스크린에서 사용 할때 react query는 fetch를 다시 하지 않는데,

왜냐하면 trending이라는 이름을 가진 쿼리가 이미 cache 에 있으니까.,.,super cool!

다른 화면이나 컴포넌트에 사용해도 다시 fetch를 하진 않음 그래서 이름을 붙여줘야함 ㅎ

---

#3.14 Refresh 

- 새로고침과 Typescript 코드를 고쳐보자

+ 동시에  query mamager에 접근할 수 있다

https://react-query.tanstack.com/reference/QueryClient

QueryClient

key는 데이터를 cache에 저장하는 것 뿐

이를 활용해서 쿼리들에게 범주화 해보자(범위를 주는 것)

---

#3.15 Typescript

- Typescript를 넣어보자

 : 우리 API에 response type을 React Query에 주는 것 (React Query가 그걸 받아서 hook의 데이터에 적용)

 

array data 찾는 방법

찾고 적용 ㅎ

이제 쿼리를 TYPE화 해보자

---

타입스크립트 처음이라 지금은 따라가기 힘들어 복습 다시 꼭 해야겠음 ㅠ

 

---

#3.16 TV Screen part One

- TV 스크린을 만들어보자

(기존 배운 것을 활용)

---

#3.17 TV Screen part Two 

- TV스크린에 제목(title(을 추가해보자

이런거

아슬아슬했당 ㅎㅎ 모두 메리크리스마스 보내세요!