눈에 보이지 않는 개선: My구독의 Redux에서 React-Query 전환 경험 공유

My구독의 Redux에서 React
-
Query 전환 경험 공유

Copyright 2022. Kakao Corp. All rights reserved. Redistribution or public display is not permitted without written permission from Kakao.
눈에 보이지 않는 개선
이동건 fred.dy

카카오
if(kakao)2022

View Slide

보이지 않는 개선?

View Slide

Project
부족한 일정
새로운 기능
새로운 기능
기존 설계
사용자 경험 개선
새로운 기능
완벽한 설계

View Slide

Project
리팩터링
새로운 기능
새로운 기능
기존 설계
사용자 경험 개선
새로운 기능

View Slide

My 구독

View Slide

톡서랍 플러스 이모티콘 플러스
My 구독
카카오톡 데이터 백업

팀채팅

연락처

패스워드

등
다양한 이모티콘 사용

이모티콘 자동 추천

랜덤 이모티콘 추천

검색

등

View Slide

톡서랍 플러스
이모티콘 플러스
My 구독
구독
상태

View Slide

구독 변경
이용권
인앱 결제

View Slide

Redux에서 React
-
Query 전환

View Slide

React Redux
개발 경험이 있음 사용 경험이 있음

View Slide

React
-
Query 조금 알아보기

Redux에서 React
-
Query로 전환 이유

React
-
Query로 전환 과정

정리

View Slide

데이터 패칭 캐싱 동기화
React
-
Query

View Slide

Why?
“React
-
Query 없이 React 자체만으로는 불가능하나요?”

View Slide

React
동기화
캐싱
const CacheContext = React.createContext(null);

const { Provider } = CacheContext;

function CacheProvider({ children }) {

const [cache, setCache] = useState({});

...

return {children};

}
데이터 패칭
const [data, setData] = useState(null);

const fetch = useCallback(() => { ... }, []);

useEffect(() => { fetch(); }, []);

return { data, refetch: fetch };
useEffect(() => {

const interval = setInterval(handleFocus, cacheTime)

window.addEventListener('focus', handleFocus, false);

...

return () => {

clearInterval(interval);

window.removeEventListener('focus', handleFocus, false);

...

};

}, []);

View Slide

React
동기화
캐싱
const CacheContext = React.createContext(null);

const { Provider } = CacheContext;

function CacheProvider({ children }) {

const [cache, setCache] = useState({});

...

return {children};

}
데이터 패칭
const [data, setData] = useState(null);

const fetch = useCallback(() => { ... }, []);

useEffect(() => { fetch(); }, []);

return { data, refetch: fetch };
useEffect(() => {

const interval = setInterval(handleFocus, cacheTime)

window.addEventListener('focus', handleFocus, false);

...

return () => {

clearInterval(interval);

window.removeEventListener('focus', handleFocus, false);

...

};

}, []);
테스트 시간

View Slide

React
-
Query
QueryClient

(Context)
useQuery
useMutation
React
Context API
useEffect
useState
useCallback
캐싱
에
러
핸
들
링

View Slide

React
-
Query 없이 React 자체만으로는 불가능하나요?

View Slide

- React에서 제공하는 기본 Hook으로도 충분히 멋진 비동기 처리 커스텀 훅을 만들 수 있습니다. \😆/

- 필요한 기능만 구현할 수 있으며 별도의 라이브러리 설치가 필요 없습니다.
😁

- 기본 Hook으로 만들기 위해서는 시간과 노력이 필요합니다.
🤔

- React
-
Query 대비 안정성을 확보하기 어렵습니다.
😭
React
-
Query 없이 React 자체만으로는 불가능하나요?
Releases 4 days ago Star 29.9K Download 6.3M / month
* 2022.09 기준, 출처 : https:/
/github.com/tanstack/query

View Slide

React
-

Redux에서 React
-

React
-

정리

View Slide

데이터
Redux
구조 구분
에러
처리

View Slide

Redux
-
Saga
Redux
상태 관리 라이브러리 미들웨어

View Slide

Redux
-
Saga isLoading
isSuccess
isError
Redux
Component

View Slide

loadStatus
Redux
-
Saga isLoading
isSuccess
isError
Redux

View Slide

React
-
Query
isLoading
isSuccess
isError
기본 옵션!

View Slide

API
Actions Sagas
Reducers

View Slide

Sagas
결제 정보 API

View Slide

Sagas
결제 정보 API
사용자 정보 API
Sagas
구독 정보 API
Sagas

View Slide

Sagas
결제 정보 API
Sagas
구독 정보 API
Sagas
상품 정보 API
Sagas

View Slide

Sagas
결제 정보 API
Sagas
구독 정보 API
Sagas
상품 정보 API
Sagas
API
Sagas
API
Sagas
API
Sagas

View Slide

Query
구독 정보 API
Query
상품 정보 API
Query
결제 정보 API
Query

View Slide

Query
구독 정보 API
Query
상품 정보 API
Query
결제 정보 API
Query
export function useData({ ...state }) {

useEffect(() => {

actions.fetchҳة੿ࠁAPI();

}, []);

const { ҳة੿ࠁ } = state;

return ҳة੿ࠁ;

}

export function useData() {

const { data, isLoading } = useQuery(KEY1, fetch࢚ಿ੿ࠁAPI);

const { data: ҳة੿ࠁ } = useQuery(

KEY2,

() => fetchҳة੿ࠁAPI(data),

{ enabled: !isLoading }

);

return ҳة੿ࠁ;

}
Redux React
-
Query

View Slide

데이터
Redux
구조 구분
에러
처리

View Slide

클라이언트 서버
페이지 이름
모
달
loadStatus
사용자 정보
구독 상태
상
품
정
보
결
제
정
보
구독
정보
배너
정보

View Slide

Redux
페이지 이름
모
loadStatus
구
독
상
태
상
품
정
보
결
제
정
보
구독
정보
배너
정보

View Slide

클라이언트 서버
페이지 이름
모
달
loadStatus
사용자 정보
구독 상태
상
품
정
보
결
제
정
보
구독
정보
배너
정보

View Slide

Context API

constate

recoil

redux

…
React
-
Query

RTK
-
Query

Apollo

SWR

…
… …
페이지 이름
모
달
loadStatus
사용자 정보
구독 상태
상
품
정
보
결
제
정
보
구독
정보
배너
정보

View Slide

…
Context API

constate

recoil

redux

…
React

View Slide

데이터
Redux
구조 구분
에러
처리

View Slide

useEffect(() => {

actions.fetchѾઁ੿ࠁ();

}, []);

useEffect(() => {

if (loadStatus?.fetchѾઁ੿ࠁ?.error) {

actions.fetching('fetchѾઁ੿ࠁ');

history.replace("/");

}

}, [loadStatus?.fetchѾઁ੿ࠁ?.error]);
Redux에서의 에러 핸들링

View Slide

결제 정보 API
컴포넌트
컴포넌트
컴포넌트

View Slide

에러 발생 loadStatus
re
-
render
컴포넌트
onError

실행
결제 정보 API

View Slide

에러 발생
Component
결제 정보 API

Query
onError

실행
React
-
Query에서의 에러 핸들링

View Slide

Why?
“다른 라이브러리 대신 React
-
Query를 사용하는 이유가 있나요?”

View Slide

RTK
-
Query Apollo SWR

View Slide

RTK
-
Query Apollo SWR
“Redux 구조를 그대로 사용해야 합니다.”

View Slide

RTK
-

View Slide

다른 라이브러리 대신 React
-
Query를 사용하는 이유가 있나요?

View Slide

- Redux에서 API 상태에 따라 화면을 구성하기 위해서는 별도의 도구나 상태가 필요합니다.
😭

- Redux
-
Saga는 의존성이 깊은 구조를 만들어 낼 수도 있습니다.
😢

- Redux는 간단한 API 추가에도 장황한 Boilerplate가 필요합니다.
😅

- Redux는 API 에러 핸들링 과정에서 다소 불필요한 작업이 발생할 수 있습니다.
🥲
다른 라이브러리 대신 React
-
Query를 사용하는 이유가 있나요?
- 우수한 비동기 처리 라이브러리가 많이 있습니다. \😆/

- 사용하는 방식, 구조, 기능에서 React
-
Query가 더 적합하다고 판단하여 사용하게 되었습니다.
🤔

View Slide

React
-

Redux에서 React
-

React
-

정리

View Slide

Redux

고차 컴포넌트
Props drilling Production
My 구독
React
-

View Slide

React
-
Redux 고차 컴포넌트
->
Redux Hook
Redux Hook
->
React
-
Query
React 16
->
React 18

View Slide

React
-
->
Redux Hook
Redux Hook
->

View Slide

고차 컴포넌트
전체적인

코드 구조 변경
API & 로직 누락

발생할 수 있음
->
Redux Hook
불필요한 re
-
render

발생할 수 있음
Props drilling

Production

…

View Slide

->
Redux Hook
function ࢚ಿ࢚ࣁಕ੉૑({ ঘ࣌, ...࢚క }) {

useEffect(() => {

ঘ࣌.fetchҳةؘ੉ఠ({ productGroupId });

}, [productGroupId]);

useEffect(() => {

if (loadStatus?.fetchҳةؘ੉ఠ?.error) {

error();

}

});

const { ҳةؘ੉ఠ, loadStatus } = ࢚క;

const fetched = isFetched(deps, loadStatus);

return fetched && ;

}

export default connectStore(࢚ಿ࢚ࣁಕ੉૑);

View Slide

->
Redux Hook
function ࢚ಿ࢚ࣁಕ੉૑({ ঘ࣌, ...࢚క }) {

useEffect(() => {



useEffect(() => {


error();

}

});



return fetched && ;

}

Redux connect 함수

View Slide

->
Redux Hook
function ࢚ಿ࢚ࣁಕ੉૑({ ঘ࣌, ...࢚క }) {

useEffect(() => {



useEffect(() => {


error();

}

});



return fetched && ;

}

dispatch
selector

View Slide

->
Redux Hook
function ࢚ಿ࢚ࣁಕ੉૑({ ঘ࣌, ...࢚క }) {

useEffect(() => {



useEffect(() => {


error();

}

});



return fetched && ;

}


View Slide

->
Redux Hook
function ࢚ಿ࢚ࣁಕ੉૑({ ঘ࣌, ...࢚క }) {

useEffect(() => {



useEffect(() => {


error();

}

});



return fetched && ;

}

selector
dispatch

View Slide

->
Redux Hook
function ࢚ಿ࢚ࣁಕ੉૑({ ঘ࣌, ...࢚క }) {

useEffect(() => {



useEffect(() => {


error();

}

});



return fetched && ;

}


View Slide

->
Redux Hook
export default function ࢚ಿ࢚ࣁಕ੉૑() {

const dispatch = useDispatch();

useEffect(() => {

dispatch(actions.fetchҳةؘ੉ఠ({ productGroupId }));


useEffect(() => {

// ী۞ ೩ٜ݂

});

const ҳةؘ੉ఠ = useSelector(({ ҳةؘ੉ఠ }) => ҳةؘ੉ఠ);

const loadStatus = useSelector(({ loadStatus }) => loadStatus);


return fetched && ;

}

View Slide

->
Redux Hook


useEffect(() => {



useEffect(() => {

// ী۞ ೩ٜ݂

});




return fetched && ;

}
액션 , 상태 삭제

View Slide

->
Redux Hook


useEffect(() => {



useEffect(() => {

// ী۞ ೩ٜ݂

});




return fetched && ;

}
useDispatch 추가
useSelector 추가

View Slide

->
Redux Hook


useEffect(() => {



useEffect(() => {

// ী۞ ೩ٜ݂

});




return fetched && ;

}
API 요청

View Slide

loadStatus
Header Component
Content Component
Footer Component
매대 정보 API
상품 정보 API
Redux Hook 최적화

View Slide

const fetchࢎਊ੗ؘ੉ఠ = useSelector(({ loadStatus }) => loadStatus.fetchࢎਊ੗ؘ੉ఠ);

const fetchݒ؀ؘ੉ఠ = useSelector(({ loadStatus }) => loadStatus.fetchݒ؀ؘ੉ఠ);

const fetch࢚ಿؘ੉ఠ = useSelector(({ loadStatus }) => loadStatus.fetch࢚ಿؘ੉ఠ);
Redux Hook을 최적화하는 이유

- 전체적인 구조가 변경됨에 따라 언제 작업이 마무리될지 모릅니다.

- 작업 도중 다른 작업이 발생할 수 있습니다.

- 해결할 수 있는 부분을 놔두기가 애매합니다.

View Slide

const fetchࢎਊ੗ؘ੉ఠ = useSelector(({ loadStatus }) => loadStatus.fetchࢎਊ੗ؘ੉ఠ);

const fetchݒ؀ؘ੉ఠ = useSelector(({ loadStatus }) => loadStatus.fetchݒ؀ؘ੉ఠ);

const fetch࢚ಿؘ੉ఠ = useSelector(({ loadStatus }) => loadStatus.fetch࢚ಿؘ੉ఠ);
export default function useLoadStatus(deps = []) {

return useSelector(

({ loadStatus }) => deps.reduce((status, key) => ({

...status, [key]: loadStatus[key]

}), {}),

isEqual

);

}

View Slide

const loadStatus = useLoadStatus([‘ fetchࢎਊ੗ؘ੉ఠ ', ‘ fetchݒ؀ؘ੉ఠ ‘,' fetch࢚ಿؘ੉ఠ ‘]);

export default function useLoadStatus(deps = []) {

return useSelector(

({ loadStatus }) => deps.reduce((status, key) => ({

...status, [key]: loadStatus[key]

}), {}),

isEqual

);

}

View Slide

const loadStatus = useLoadStatus([‘ fetchࢎਊ੗ؘ੉ఠ ', ‘ fetchݒ؀ؘ੉ఠ ‘,' fetch࢚ಿؘ੉ఠ ‘]);

0
19
38
기존 useSelector useLoadStatus

View Slide

Redux Hook
->
React
-
Query
React
-
->

View Slide

Redux Hook
->
React
-
Query


useEffect(() => {



useEffect(() => {


error();

}

});




return fetched && ;

}

View Slide

Redux Hook
->
React
-
Query

const { data: ҳةؘ੉ఠ, isLoading } = useQuery(['ҳةؘ੉ఠ'], () => fetchҳةؘ੉ఠ(productGroupId), {

enabled: productGroupId,

onError: () => {

error();

},

});

return !isLoading && ;

}

View Slide

Redux Hook
->
React
-
Query



onError: () => {

error();

},

});


}

loadStatus 대신 사용

View Slide

Redux Hook
->
React
-
Query



onError: () => {

error();

},

});


}

Dispatch & Selector 대신 사용

View Slide

Redux Hook
->
React
-
Query



onError: () => {

error();

},

});


}

에러 핸들링

View Slide

Redux Hook
->
React
-
Query



onError: () => {

error();

},

});


}

with React 16

View Slide

Redux Hook
->
React
-
Query



onError: () => {

error();

},

});


}

with React 16
if (!ݒ؀Success || !࢚ಿSuccess || (!੉ਊӂIdle && !੉ਊӂSuccess) || ੌद઺૑࢚ಿLoading) {

return null;

}

View Slide

React
-
Query 개선 - useQueriesLoading
export function useQueriesLoading() {

const client = useQueryClient();

const queries = client.getQueryCache().findAll();

const [queryChangedCount, setQueryChangedCount] = useState(0);

useEffect(() => {

if (queries) {

setQueryChangedCount(queries.length);

}

}, []);

useEffect(() => {

if (queries.every(({ state }) => state.status !== 'loading') && queryChangedCount >= 0) {

setQueryChangedCount((prevState) => prevState - 1);

}

});

return queryChangedCount >= 0

}

View Slide

React
-




useEffect(() => {

if (queries) {


}

}, []);

useEffect(() => {



}

});


}

등록된 쿼리 가져오기

View Slide

React
-




useEffect(() => {

if (queries) {


}

}, []);

useEffect(() => {



}

});


}

전체 쿼리 개수를 state 저장

View Slide

React
-




useEffect(() => {

if (queries) {


}

}, []);

useEffect(() => {



}

});


}

loading 상태인지 확인

View Slide

React
-
if (!ݒ؀Success || !࢚ಿSuccess || (!੉ਊӂIdle && !੉ਊӂSuccess) || ੌद઺૑࢚ಿLoading) {

return null;

}
const isQueriesLoading = useQueriesLoading();

if(isQueriesLoading){

return null

}

View Slide

Project
새로운 기능
리팩터링

View Slide

폴더 구조 개선
Query

Mutation

네이밍
Query

작성 방식
프로젝트

기본 옵션
Query Key

작성 규칙

View Slide

Query

작성 방식

View Slide

Query 작성 방식
매대 정보 API
상품 정보 API
Header Component
Content Component
Footer Component

View Slide

Query 작성 방식
상품 정보 API
Header Component
Content Component

View Slide

API
Query 작성 방식
기본 Query

(기본 Mutation)

View Slide

기본 Query

(기본 Mutation)
Query 작성 방식
export function Component() {

const { data: ࢚ಿ੿ࠁ, isLoading } = use࢚ಿ੿ࠁ();

const { data: ҳة੿ࠁ } = useҳة੿ࠁ({ ࢚ಿ੿ࠁ, options: {

enabled: !isLoading

}});

return ;

}
export function useData() {

const { data: ࢚ಿ੿ࠁ, isLoading } = use࢚ಿ੿ࠁ();

const { data: ҳة੿ࠁ } = useҳة੿ࠁ({ ࢚ಿ੿ࠁ, options: {

enabled: !isLoading

}});

return ҳة੿ࠁ;

}
컴포넌트 커스텀 훅

View Slide

Query 작성 방식
기본 Query

(기본 Mutation)
공통 옵션
+

View Slide

Query 작성 방식
기본 Query

(기본 Mutation)
+
공통 옵션
useErrorBoundary
select

View Slide

기본 Query를 위한 기본 Query
Query 작성 방식
+
useQuery 공통 옵션

View Slide

Query 작성 방식
- 페이지 단위 Key 값 추가

- Select에서 실질적인 데이터가 있는 값만 반환

- onError 옵션이 있어야 useErrorBoundary를 설정하도록 처리
import { useQuery as useQueryOrigin } from 'react-query';
export default function useQuery(queryKey, queryFn, options = {}) {
const { … } = options;
return useQueryOrigin(queryKey, queryFn, { … });
}
->
페이지 단위 쿼리 초기화 가능
->
쿼리를 사용할 때 중복 Select 방지
->
에러 핸들링 누락 방지

View Slide

Query

View Slide

Redux + Redux
-
Saga
- data

- 매대데이터

- actions

- actionTypes

- reducers

- sagas

- services

- 홈데이터
React
-
Query
- hooks

- services

- queries

- 매대데이터

- 홈데이터

- mutations

View Slide

actions actionTypes reducers sagas services
export function useݒ؀({ options } = {}) {

return useQuery([queryKeys.ݒ؀], () => api.get(`/ݒ؀/API`), options);

}
action actionType reducer saga service

View Slide

Redux + Redux
-
Saga
- data

- 매대데이터

- actions

- actionTypes

- reducers

- sagas

- services

- 홈데이터

View Slide

React
-
Query
- hooks

- services

- queries

- 매대데이터

- 홈데이터

- mutations

View Slide

React
-
Query
- hooks

- services

- queries

- 매대데이터

- 홈데이터

- mutations
POST, DELETE …
GET

View Slide

- hooks

- services

- queries

- 매대데이터

- 홈데이터

- mutations
React
-
Query

View Slide

- hooks

- services

- queries

- 매대데이터

- 홈데이터

- mutations
Page
Component
Hook
React
-
Query

View Slide

My구독
중복 API 및 로직 최소화
API 네이밍

View Slide

My구독
API 네이밍
import 경로에서 목적 표현 import { useݒ؀ؘ੉ఠ } from '@/hooks/queries/ݒ؀ؘ੉ఠ';
목적

View Slide

My구독
API 네이밍
import 경로에서 목적 표현
동일한 API 요청 최소화

View Slide

React
-
React 16
->
React 18
-

View Slide

Safari
Chrome Internet Explorer
React 16
->
React 18

View Slide

Safari
Chrome
React 16
->
React 18
Internet Explorer

View Slide

React
-
Query v4

(TanStack Query v4)
React 18
React 16
->
React 18

View Slide

Suspense

View Slide

React 16
->
React 18
function ࢚ಿ࢚ࣁۨ੉ইਓ() {

...

const { data } = useQuery(...);

return ;

}
function ࢚ಿ࢚ࣁಕ੉૑() {

...

const { isSuccess } = useQuery(...);

const { isSuccess: ҳة੿ࠁSuccess } = useQuery(...);

const isRender = isSuccess && ҳة੿ࠁSuccess;

return isRender && <࢚ಿ࢚ࣁۨ੉ইਓ>࢚ಿ࢚ࣁۨ੉ইਓ>;

}
Redux
데이터 바탕으로 화면 구성
데이터 요청 및 렌더링 여부 결정

View Slide


...


return ;

}

...





}
중복 요청 re
-
render
React 16
->
React 18

View Slide

React 16
->
React 18

...


return ;

}

...





}

View Slide

React 16
->
React 18

...

return <࢚ಿ࢚ࣁۨ੉ইਓ />;

}
function Route() {

...

return <࢚ಿ࢚ࣁಕ੉૑ />;

}

...


return ;

}
isRender 분기 삭제

View Slide

React 16
->
React 18

...


return ;

}
function Route() {

...


}

View Slide

React 16
->
React 18

...


return ;

}
function Route() {

...


}

...


return ;

}

...





}
이전 이후

View Slide

Redux에서 React
-

View Slide

- My구독 특성과 상황 덕분에 총 3단계로 나누어 전환작업을 진행했습니다.

- 과정마다 그 상황에 맞춰 최대한 더 좋은 방향으로 진행할 수 있도록 여러 도전을 진행했습니다.

- Redux Hook 기반으로 전환할 때 select를 좀 더 최적화하는 방법에 대해 공유했습니다.

- React
-
Query로 전환하는 과정에서 React 16에서 상태 지옥에서 벗어나는 방법에 대해 공유했습니다.

- My구독에서 React
-
Query를 어떻게, 어떤 구조로 사용하는지 공유했습니다.

- React 18로 전환하면서 어떤 이점이 발생하는지 공유했습니다.
Redux에서 React
-

View Slide

React
-

Redux에서 React
-

React
-

정리

View Slide

그래서 써보니 어떤가요?

View Slide

이런 점에서는 좋았습니다. \😆/
- Hook 기반을 제공하고 캐싱을 지원합니다.

View Slide


- 비동기 처리를 위한 유용한 도구를 제공합니다.

View Slide


비동기 처리 상태
isLoading

isFetching

isSuccess

…
In
fi
nite Queries

View Slide


In
fi
nite Queries
My구독
화면 render 여부

Query enabled 처리
결제 내역 화면
비동기 처리 상태

View Slide



- 백그라운드 패칭을 지원합니다.
Background Fetching
focus,

mount,

interval

…

View Slide



My구독
이용권 등록 및 변경 페이지

구독 상세 페이지

…
Background Fetching

View Slide



게시판 댓글 좋아요 / 싫어요 주식 목록

View Slide

이런 상황에서는 고민을 해보세요. 🤔
- 서버 사이드 데이터가 거의 없는 경우 recoil

redux

…

View Slide

- 서버 사이드 데이터가 거의 없는 경우
->
서버 사이드 데이터가 더 많아질 때 적용

View Slide

- React 18에서 비동기 처리 상태때문에 도입하는 경우
- 서버 사이드 데이터가 거의 없는 경우
->
Suspense 사용

View Slide

이런 아쉬운 점이 있습니다. 😭
- Mutation은 한 번만 호출하기 위해 Wrapper 함수가 필요합니다.
Redux
-
Saga의 takeLatest

View Slide


...



return;

}


try {



} catch (e) {

throw e;

}

};

}
비동기 작업 대기

View Slide


...



return;

}


try {



} catch (e) {

throw e;

}

};

}
useIsMutaing 기반 mutation 작업 대기

View Slide

Storybook

- UI 테스트를 진행하게 될 때 Mock API가 필요할 수 있습니다.
My구독
E2E Test
Snapshot Test

View Slide

Storybook

My구독
E2E Test
Snapshot Test
Mock Service Worker

View Slide

구독 완료 페이지


- 항상 서버 데이터와 같은 데이터를 바라보는 것이 좋은 것은 아닙니다.
1회성 페이지 에러
재요청

View Slide

구독 완료 페이지


1회성 API
refetchOnWindowFocus: false,

retry: 0,

View Slide




- 전체적인 데이터 흐름을 파악하기 어렵다는 느낌을 받기도 합니다.
Pure 컴포넌트 상태 컴포넌트

View Slide




Pure 컴포넌트
상태 컴포넌트
API 데이터 중 하나만 필요

View Slide




Pure 컴포넌트 상태 컴포넌트
Props drilling
API 데이터 중 하나만 필요

View Slide





View Slide

보이지 않는 개선
My구독의 Redux에서 React
-
Query 전환 경험 공유

View Slide

참고 자료 & 이미지 출처
21) React-Query ܾܻૉ, Star, ׮਍۽٘ ੿ࠁ https://github.com/tanstack/query

49, 50, 51, 52, 53) ࠺زӝ ࢚క ҙܻ ۄ੉࠳۞ܻ ࠺Ү https://react-query-v3.tanstack.com/comparison

51) RTK-Query ੿ࠁ https://redux-toolkit.js.org/rtk-query/overview

52) apollo ੿ࠁ https://www.apollographql.com/

53) SWR ੿ࠁ https://swr.vercel.app/ko

90-94) useQueriesLoading ղਊ https://tech.kakao.com/2022/06/13/react-query/

120, 121, 122) IE, Chrome, Safari, React ই੉௑ https://commons.wikimedia.org/

122) React-Query ই੉௑ https://react-query-v3.tanstack.com/

151) Mock Service Worker ই੉௑ https://mswjs.io/

View Slide

E.O.D

View Slide

눈에 보이지 않는 개선: My구독의 Redux에서 React-Query 전환 경험 공유

눈에 보이지 않는 개선: My구독의 Redux에서 React-Query 전환 경험 공유

kakao
PRO

More Decks by kakao

Other Decks in Programming

Featured

Transcript

눈에 보이지 않는 개선: My구독의 Redux에서 React-Query 전환 경험 공유

눈에 보이지 않는 개선: My구독의 Redux에서 React-Query 전환 경험 공유

kakao PRO

More Decks by kakao

Other Decks in Programming

Featured

Transcript

kakao
PRO