DEVOCEAN

안녕하세요 Teus입니다.

올해부터 DEVOCEAN을 통해서 스터디를 진행하고 있습니다!

제가 준비한 주제는 React를 활용해서 크로스플랫폼을 플랫폼 어플리캐이션을 만드는 React Native입니다!

이번주는 8주차에 진행한 스터디 내용을 다루는 포스팅 입니다!

0. 스터디 운영

이번주는 달력을 보면 알겠지만, 토일월 3일 연휴가 있던 날 입니다.

그래서, 맘속으로는 이번주 한주 쉬어가야하나? 생각 했는데....

(대구에서 올라와서 스터디에 열정을 불태워주신 PSJ님 ㄷㄷ..)

덕분에 나태해진 정신머리 기강을 잡고😅, 이번주도 스터디를 진행 했습니다!

가면갈수록 스터디 그 자체보다, 아이스브레이킹을 뭐했는지가 흥미진진해 지는 RN스터디 입니다.

이번주 같은 경우 KHJ님께서 노래맞추기를 준비해 주셨습니다!

하지만 노래만 맞추면 약간 심심하죠?

그래서 노래맞추기 + 노래테마 빙고가 진행되었습니다!

(노래만 맞추면 섭섭하니, 노래의 테마가지고 빙고까지!)

(LJA님 바로 빠르게 정답!)

(도촬맨 태웅님을 도촬하는 Teus)

(요즘 노래 못맞추어서 현탐이온 콧수염이 멋진 KSW님)

그리고나서, 이번주 역시 읽은 책 내용에 대한 토의시간이 있었습니다.

(놀때는 재미있게 놀고, 공부할때는 공부도 열심히!)

React Native만의 내용보단, JavaScript, React, RN에서만 찾아볼 수 있는 독특한 내용들을 다루고 있습니다.

이제 가면갈수록 RN에 대한 새로운 내용은 별로 없고, React에서 사용하던 패키지/라이브러리 위주라 TIL, TIDK 내용은 많이 없어서 아쉬워요

이번주는 React Query 사용하기 1편 으로, React에서도 사용되는 커스텀Hook중 하나인 useQuery에 대해서 다룹니다.

1. UseQuery

UseQuery는 Callback의 결과를 저장하고, 이 값이 바뀔때 props처럼 component가 rerendering 되게 만들어 줍니다.

아래 간단한 사용법을 보실까요?

import {useQuery} from 'react-query';

function Sample() {
  //query의 결과값을 Object형태로 저장해둠~~~~
  const result = useQuery('articles', getArticles);
  const { data, error, isLoading } = result;
}

useQuery의 결과값은 단순 값 뿐만 아니라, 해당 Data가 loading되었는지, error인지 들 여러 상태값을 저장합니다.

UseQuery Official Document

반환되는 State는 다양하게 존재하나, 주로 사용되는 State에 대해서 확인하면

1. isloading : Requests, 데이터 조회등 waiting 동작이 진행되고 있는 상태

2. error : 데이터조회 결과 에러 발생

3. data : 데이터 조회 결과값을 저장

4. isFetching : data가 cache된 상태에서, 새로 데이터를 가지고 올 때

위에서 말씀드렸지만, useQuery의 반환값이 변경됨에 따라서 Component가 rerendering된다고 하였습니다.

따라서 위의 isloading, error, data에 따라서 조건부 rendering을 작성할 경우 query의 진행 상태에 따라 다른 결과값을 보여줄 수가 있습니다

import {useQuery} from 'react-query';
import {Text, View} from 'react-native';

function Sample() {
  const result = useQuery('articles', getArticles);
  const { data, error, isLoading } = result;

  if (isLoading) return <Text>로딩 중..</Text>;
  if (error) return <Text>오류 발생</Text>;
  return <View>{/* 데이터 보여주기.. */}</View>;
}

2. Cache Key

위에서 보면 useQuery에 'articles'라는 String이 사용되고 있습니다. 하지만 이 String이 무슨 역할을 하는지 모호합니다.

해당 String은 cache Key를 의미하며, hash 자료구조의 key와 유사하게 생각하면 됩니다.

useQuery는 하나의 Component뿐만 아니라 다른 Component에서 사용하게 되는데, 이때 Custom hook을 사용할 경우 불필요한 Requests횟수를 감소시킬 수가 있게 됩니다.

//출처 : https://stackoverflow.com/questions/68336399/access-data-already-fetched-with-react-query-in-other-component
//QueryContext.js
const useTodos = () => useQuery('todos', fetchFunction)

//HomeComponent.js
const { data } = useTodos()
//TodosComponent.js
const { data } = useTodos()

동일한 query key가 존재할 경우 한번만 QueryFunc을 실행한다는게 중요한점이 되겠습니다!

이 query key의 경우 단순한 string뿐만 아니라 array, object로도 사용이 가능합니다.

import {useQuery} from 'react-query';
                          
function Sample({id}) {
  const result = useQuery(['article', id], () => getArticle(id));
}

이때 주의사항으로 [id, 'atricle']과 ['article', id]는 동일한 값으로 취급됩니다.

QueryKey같은 경우 다수의 Component가 공유해야 하는데, 이때 QueryClient객체를 사용해서 Provider를 만들고, 이 Provider가 감싸고 있는 하부 Component에서 Query Key를 공유하게 됩니다.

import {QueryClient, QueryClientProvider} from 'react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <NavigationContainer>
        <RootStack />
      </NavigationContainer>
    </QueryClientProvider>
  );
}

3. Query Option

위에서 Cache된 값과 refetch라는 내용이 있었습니다.

HTTP의 쿠키, Cache와 유사하게 React Query또한 Data를 무한정 cache하고 있을 수 없습니다.

적절한 순간에 Cache된 값을 버리고 최신화를 시키는 전략이 필요합니다.

이때 React Query에서는 staleTime과 cacheTime Option을 통해서 해당 전략을 작성하게 됩니다.

staleTime : component와 상관없이 Query가 실행된 후 얼마 Query의 결과를 저장할지를 결정합니다. 기본적으로 0이어서 바로 old data로 취급합니다.

cacheTime : component가 unmount된 후 얼마나 Data를 유지할지를 결정합니다. 기본적으로 5이며, component가 해당 시간안에 다시 mount될 경우 기존 data를 사용하게 됩니다.

이때 위 staleTime과 cacheTime이 서로 겹치는것을 알 수 있습니다.

때문에, staleTime이 0이고, cacheTime이 5인경우를 생각해보면(Component A, B에서 모두 동일한 Query Key로 useQuery를 실행)

A Loading -> query실행 -> B Loading -> staletime 때문에 query실행 -> A, B unloading -> A Loading -> cacheTime이 존재해서 cacheTime으로는 Query미실행 -> StaleTime으로는 oldData가 되므로 Query실행

조금 복잡하죠?

결국은 staleTime과 cacheTime을 AND로 고려해서 query가 실행되는게 핵심이라고 볼수 있습니다.

useQuery에 Option을 적용할 때는 아래와 같이 사용합니다

function Sample() {
  const result = useQuery(
    'articles',
    getArticles, 
    {
      enabled: true,
      refetchOnMount: true,
    },
  );
}

useQuery에서 사용되는 Option 역시 공식문서에서 바로 확인할 수가 있습니다!

UseQuery Official Document

4. Axios와 QueryFunc

결국 uesQuery는 Query의 결과를 가지고 오는 것이고, 이 Query가 무엇인지를 정의하는것이 QueryFucn이 됩니다.

Query에 사용되는 api를 다양하게 만들 수 있지만, 스터디에서 사용한 교재의 경우 Axios library를 사용해서 requests결과를 가지고 오는 방법을 사용합니다.

아래 예시를 통해서 어떻게 사용되는지 바로 알수가 있습니다!

import axios from 'axios';

const client = axios.create({
  'https://articles.example.com',
});

async function getArticles() {
  const response = await client.get('/articles');
  return response.data;
}

function ArticlesScreen() {
  const {data, isLoading} = useQuery('articles', getArticles);

  console.log({data, isLoading});

  return (
    <View>
      <Text>Articles</Text>
    </View>
  );
}

5. 조별토의

마지막으로 아이스브레이킹에 밀려 핵심에서 밀려나버린 조별토의 시간입니다.

1조 : 아이디에이션이 끝나고, Figma 및 PPT를 사용해서 프로토타이핑 진행중

(PPT를 가지고 프로토 타이핑을 하시던중...)

(Figma로 프로토타이핑 하는법 배우러 2조에 놀러옴)

2조 : 관악구미화원님의 지도하에 빠른 프로토타이핑 후 구현 진행중. 현재 운동화면과 Diet화면이 구현되어가고 있습니다!

(SKT지하 2층의 공유인프라로 팀원들끼리 오프라인 코드리뷰중)

3조 : 아이디에이션 끝나고, 다른팀 염탐중. 염탐하다가 쫒겨나는 모습입니다🤣

다음주는 각조 조별프로젝트 진행을 위해서 스터디 한주 셧다를 내립니다!

한주뒤에 각 조별 진행사항을 공유하는 중간발표회가 있을 예정입니다.

모두 기대해주세요!

감사합니다~