React 리액트 - Apollo vs Redux 뭐가 더 좋은가? 장단점 차이점

리액트 공부를 하다보니, GQL 클라이언트 환경에서 ApolloClient 생성시, clientState를 만들게 된다. 

기본적인 state를 넣고, 이를 변경하는 Mutation을 정의해서 넣어주면 된다.

import ApolloClient from "apollo-boost";
import { defaults, resolvers } from "./LocalState";

export default new ApolloClient({
  uri: "http://localhost:4000",
  clientState: {
    defaults,
    resolvers
  }
});

 

지금 Redux 덕 구조를 막 배운 나로써는 혼란스럽다. 이제 막 배운 기술인데 벌써 대처가 가능하다니!!!!

Redux를 한번 배워둔것이 나쁘진 않다. 만약 REST API 환경이라면 즉, SQL환경 이라면 Redux 조합으로 캐쉬처리를 하는 방법이 있기때문. React Native에서도 활용을 할수있다.

 

Redux vs Apollo 관련 글을 찾아보다 네이버 기술 블로그에 정리된 내용이 있었다.

https://d2.naver.com/helloworld/4245995

불러오는 중입니다...

Redux는 REST API를 사용하기 때문에 리소스의 크기가 서버에서 결정된다.

데이터 교환이 복잡하게 이루어지고, 엔드포인트 증가 및 overfetching과 underfetching 등의 문제점을 가지고 있다.

 Apollo Client는 GraphQL을 기반으로 한다.

서버에서는 어떠한 자원을 사용할 수 있는지 정의하고, 클라이언트에서 렌더링에 필요한 데이터를 요청하는 방식이다. 필요한 데이터 교환이 이루어지기 때문에 매우 깔끔하며 효과적이다.

 

# GraphQL + Apollo 조합은:

1. GraphQL 서버에서 원하는 데이터만 보내준다. 서버에도 좋고

2. Apollo 클라이언트 : Query가 ApolloClient를 구독하고 Client는 캐쉬관리를 통해. 같은 Query는 캐쉬를 줘서, 빠르게 클라이언트에 로딩시키고(리덕스 효과) , 없다면 서버에 요청하고 데이터가 오면 바로 구독자인 Query 컴포에게 알려서 데이터를 가져온다. 

 

# Rest API + Redux 조합은:

1. REST API 자체가 overfetching, underfetching 문제가 있다. 즉 데이터를 과하게 주거나, 이곳 저곳의 데이터를 다 모아야 사이트가 만들어지는 문제 상황이 발생하는 것.

2. Redux 캐쉬관리를 action과 리듀서에 정의를 다 해야하기 때문에 apolloClient보다 할일이 더 늘어난다.

 

결론 : GraphQL + Apollo 조합 이론상 짱짱. 

아직은 다른 서비스와 호환을 한다면 REST API를 GraphQL로 Wrapping 하는 작업이 필요해서, 위 조합이 최고인지는 잘 모르지만, 위 조합으로 공부를 앞으로 더 해보겠다.

hoxy: REST API를 자동으로 GraphQL로 만들어 주는 서비스를 한다면!?

 

DOS IMPACT - WEB Developer

KIM DO YOUNG

WEB : REACT JS | REACT NATIVE | GraphQL PRISMA