여러분들은 relay에 대해서 알고 계신가요?
relay는 GraphQL사용을 용이하게 해주는 자바스크립트 프레임워크입니다.
relay와 가장 많이 비교되는 것이 apollo-client입니다.
오늘은 apollo가 아닌 relay에 대해서 알아보는 시간을 가져보도록 하겠습니다.
Relay의 특징
- GraphQL 데이터를 사용하는 React앱을 빌드하기 위한 자바스크립트 프레임워크 입니다.
- relay의 특징으로써, 안정적이고, 성능이 좋습니다
- 선언적 데이터 가져오기: 컴포넌트는 필요한 데이터를 선언하게 되며, 릴레이는 이를 효율적(efficiently)으로 가져오는 방법을 알아냅니다.
- 정적 빌드 단계(static build): relay는 쿼리의 유효성을 검사 및 최적화, 아티팩트를 미리 계산하여, 더 빠른 런타임 성능을 달성합니다.
- 즉, relay는
유지보수성,유형 안정성,런타임 성능을 강조하고 있으며, react 어플리케이션에서 grpahQL데이터를 가져오고 관리하기 위한 자바스크립트 프레임워크라고 할 수 있습니다.
relay의 장점
- 빠른 반복 유지:릴레이는 각 컴포넌트가 필요한 데이터를 가져와서 사용할 수 있도록 보장해줍니다.
- 자동 최적화:전체 앱의 데이터 요구사항을 집계하고 최적화 한다. 따라서 효과적으로 단일 graphQL요청에서 가져올 수 있다.
- 데이터 일관성: 데이터의 영향을 미치는 데이터가 변경 될 때, 모든 구성요소를 최신으로 유지하고 필요한 경우에만 효율적으로 업데이트 한다.
apollo vs relay
apollo과 relay는 어떤 차이를 가지고 있을까요? 한번 살펴보도록 하겠습니다.
또한, graphQL데이터를 다룰 수 있는 URQL은 보지않도록 하겠습니다.
먼저 apollo의 경우에는 유연(=flexible) 하고 쉽게쉽게(=easygoing)라는 특징을 가지고 있습니다. 이는 relay와 명확하게 비교되는데, relay는 반대로 structured(=구조적)하며, opinionated(=의견이 많다)합니다.
apollo와 정반대인것을 알 수 있습니다.
또한 relay는 리액트 프레임워크내에서만 사용이 가능합니다.반대로 아폴로의 경우에는 거의 모든 프론트엔드에서 사용이 가능합니다. 즉, 확장성이 좋은것이겠죠
그래서 대체적으로 relaydml 러닝커브는 높지만 한번 배우게 되면, structured하기 때문에 에러가 날 가능성도 적게되고, 상대적으로 사용하기가 훨씬 용이하다고 합니다. 이와 반대로 apollo의 경우에는 set up 하기에도 편하고 러닝커브가 낮긴 하지만 strict하지 않기 때문에 갈수록 어려워지는 경우라고 할 수 있겠습니다.
Apollo가 적합한 경우
- 다양한 개발환경을 가지고 있는 팀의 경우 좋습니다. 아폴로는 거의 모든 프론트엔드 프레임워크를 수용할 수 있기 때문입니다. 따라서 apollo의 경우에는 완전한 기능을 갖춘 all rounder graphQL client solution이라고 할 수 있겠습니다.
Relay가 적합한 경우
- large-scale applications with complex data requirements(복잡한 데이터 요구사항을 가진 큰 규모의 어플리케이션)
- 다른 어플리케이션 파트들을 가진 거대한 종속성 사이에서 수동으로 이런 종속성을 관리하는 경우, 시간이 많이 소모되고 에러가 일어나기가 쉽습니다.
오늘은 간단한 relay introduction을 진행해 봤습니다.
다음시간에는 relay로 세팅하는 과정을 같이 진행해보도록 하겠습니다!😀
