TIL 10주 4일차

구조분해할당

 

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다.

 

const { results } = await fetch(`${BASE_URL}/now_playing?api_key=${API_KEY}&language=en-US&page=1`).then((res) => res.json());

{

dates: {...},

page: 1,

results: [...],

total_page: 84

} 

-> 서버에서 results만 빼옴

 

---

const Root = () => {

  return (

    <Stack.Navigator

      screenOptions={{

        headerShown: false,

      }}

    >

      <Stack.Screen name="Tabs" component={Tabs} /> //Initial Screen

      <Stack.Screen name="Stacks" component={Stacks} />

    </Stack.Navigator>

  );

};

export default Root;

각각의 서로 다른 네비게이터들을 병합

Initila Screen : Tabs.js -> Tabs 컴포넌트만 화면에 보임

 

Stack navigation:

https://eunbin00.tistory.com/41

 

 

 

 

---

useNavigation : props말고 navigation을 전달하는 다른 방법

 

import {
    useNavigation,
} from '@react-navigation/native';

const navigation = useNavigation();

  return (
    <Button
      title="Detail 1 열기"
      onPress={() => navigation.push('Detail', {id: 1})}
    />
  );
}

 

or 

 

 const { navigate } = useNavigation();

  return (

    <Button onPress={() => navigate("Stacks", { screen: "Detail", params: { movieId: movie.id } })}>

React Navigation :

https://velog.io/@yejiiha/React-Navigation-React-Navigator-2

https://code-masterjung.tistory.com/126

---

 

 

[react-query] : 서버 스테이트를 관리하기 위한 라이브러리

 

queryClient : 

 

const { data: nowPlayingData, isLoading: isLoadingNP, refetch: refetchNP } = useQuery(["Movies", "NowPlaying"], getNowPlayings);

  const { data: topRatedData, isLoading: isLoadingTR, refetch: refetchTR } = useQuery(["Movies", "TopRated"], getTopRated);

  const { data: upcomingData, isLoading: isLoadingUC, refetch: refetchUC } = useQuery(["Movies", "Upcoming"], getUpcoming);

const onRefresh = async () => {

    setIsRefreshing(true);

    // await refetchNP();

    // await refetchTR();

    // await refetchUC();

    // await Promise.all([refetchNP(), refetchTR(), refetchUC()]);

    queryClient.refetchQueries(["Movies"])

    setIsRefreshing(false);

  };

세 가지의 useQuery가 "Movies"라는 동일한 쿼리 key를 가지고 있음

"Movies"를 가지고 있는 useQuery의 fetcher 함수들이 모 일괄적으로 실행된다.

 

const {data, isLoading} = useQuery(["Detail", movieId], getDetail)

getDetail이란 fetcher함수가 실행 됐을 때 쿼리 키가 getDetail이란 함수에 자동으로 매개변수로 넘어감

-> useQuery 내에서 일어나는 일

 

---

useMutation : 서버에 있는 내용을 변경해줄 때 사용 // useQuery : 서버에 있는 내용을 가져올 때 사용

 

 

 

---

비동기처리와 callback함수 => https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/

Promise => https://joshua1988.github.io/web-development/javascript/promise-for-beginners/