페이스북이 걸어온 React와 GraphQL 이라는 길

저는 GraphQL을 이제 막 공부하기 시작한 단계이지만, GraphQL의 개념을 이해하고서부터 데이터를 중심으로 페이스북(Meta)이 React부터 GraphQL까지 걸어왔던 과정에 대해 배운점이 많다고 생각했습니다. 그래서 해당 과정을 정리하고, 이를 통해 제가 느낀점을 글로 써봅니다.

React

react-logo

기존에 웹페이지를 개발할 때는 DOM에 직접 접근하여 UI를 조작 했었습니다. 하지만 반응형 웹 앱이 발전함에 따라 데이터를 중심으로 사용자와 상호작용하는 고도화된 페이지의 요구가 증가하였고, 이러한 개발 방식은 문제가 많이 발생했습니다.

DOM에 접근하는 명확한 기준점이 없기 때문에 다뤄야 할 데이터와 조작해야 할 DOM은 점점 많아질수록 어느 시점에 DOM을 업데이트 했냐를 추적하기가 어려워지기 때문입니다. 이러한 방식은 유지보수를 복잡하게 만들어서 새로운 개발 방법을 요구하는듯 했습니다.

이를 해결하기 위해 나온것이 React였고 React는 데이터에 기반하여 DOM을 간접적으로 제어해줌으로써 선언적 UI관리라는 방법을 제시했습니다.

상태 관리

redux-logo

DOM을 제어하는 것의 부담을 덜게 되면서 사람들은 상태(컴포넌트에서 관리하는 변경 가능한 값) 관리라는 것에만 집중할 수 있게 됐습니다.

하지만 이럼에도 불구하고 많고 복잡한 상태들을 포함하는 UI개발은 어려웠습니다.

그래서 단방향 흐름 아키텍처인 Flux라는 패턴이 제안되고, 여러곳에 분산되어 유지보수 하기 어려운 상태들을 단일 원천이라는 공간에서 관리하는 Redux라는 상태 관리 방식까지 제안이 됐습니다.

React내에서 이러한 패턴과 상태 관리가 정착됨으로써 상태 관리에 대한 문제가 해결 됐다고 느끼시나요?

외부 데이터 스키마 그리고 의존성

rest-api

React내부의 문제를 점차 해결해가니 보이는 본질적 문제는 외부 데이터 스키마 입니다. 즉, Rest API방식으로 가져오던 데이터들이죠.

실질적으로 상태 관리라고 하는 데이터들은 외부 데이터 스키마에 의존하고 있습니다. 그래서 내부의 데이터 관리를 아무리 해결하더라도 의존성으로 얽혀 있는 React 외부의 문제를 해결하지 않으면 계속 문제가 생겨나기 마련이죠.

이러한 React 외부의 문제를 해결하려면 서버 개발자와 클라이언트 개발자가 데이터에 대해 같은 이해관계를 가지고 이상적인 API를 개발하면 해결할 수 있습니다. 하지만 서버 개발자와 클라이언트 개발자는 데이터에 대해서 본질적으로 다른 관점을 가지기 때문에 이상적인 API를 개발하는 것은 지속하기가 어렵습니다.

서버 개발자는 데이터베이스의 정규화에 기반하여 데이터를 다루고, 클라이언트 개발자는 상태 관리에 적합하도록 데이터를 다루기 때문입니다.

그렇기 때문에 프로젝트 규모가 커질수록 서로의 이해관계와 호환되지 않는 API 명세들이 생겨나게 되고 이것들이 쌓이다 보면 React 내부의 상태관리를 최적화 하는 것에는 한계가 생겨나게 됩니다.

GraphQL

graph-ql

이러한 문제를 해결하기 위해선 서로 다른 데이터의 관점으로 결합된 클라이언트와 서버간의 의존성을 느슨하게 만들어야 합니다.

그래서 페이스북은 실질적으로 데이터를 사용하는 곳이 데이터의 확장에 더 힘을 줄 수 있게 하는 방식을 생각했고, 그렇게 나오게 된 언어가 GraphQL이고 사용하는 도구가 Relay입니다.

GraphQL을 통해 클라이언트는 외부 데이터 스키마를 자신이 관리하고 보여주는 방식대로 확장과 변형을 할 수 있게 됩니다.


과정을 통해 느낀점

페이스북은 DOM 조작에 대한 의존성을 줄이고자 React를 개발하였고, React의 상태 관리의 본질인 외부 데이터 스키마에 대한 의존성을 줄이고자 GraphQL을 개발하였습니다.

이처럼 의존성은 개발하는 과정에서 지속적으로 얽혀있지만, 이를 해결할 수 있는 Best practice를 찾기란 어렵습니다. 저도 개발자로서 항상 고민하지만 어느정도 당장의 편의와 타협하고 개선하기를 포기하기도 했었던 것 같네요.

하지만 GraphQL의 철학을 공부하면서, 결국 의존성이라는 문제를 해결하기 위해 사람들은 기존의 틀에 국한되지 않고 새로운 관점으로 바라보려고 시도하고, 덕분에 다양한 개발 방법론이 나타나서 기술이 발전하게 되는 과정이라고도 생각했습니다. 그래서 저의 개발 관점도 GraphQL을 공부한 기점으로 많은 변화가 있다고 느낍니다.

그리고 현재 이 과정에서 데이터 기반의 개발이 본질적으로 중요해지는지도 조금이나마 알게 된 것 같습니다.

https://relay.dev/docs/principles-and-architecture/thinking-in-graphql/