Apollo 를 이용한 상태관리

 

---

props 전달로도 충분히 가능하지만, graphQL(Apollo)를 이용하여 상태관리 할 수 있다는 사실을 알고 있었고,

회사에서도 graphQL을 주력으로 사용하기 때문에(난 랜딩페이지 담당이라 아직 사용할일은 없지만)

어떻게든 graphQL을 이용하여 상태관리를 하고 싶었다.

 

며칠간 유튜브, 블로그, 공식문서를 전전하다 apollo를 이용한 상태관리로 TodoList를 만드는 과정을 설명한 블로그를 찾게 되었다.

 

그동안 삽질한 것들의 농축 + 기가막힌 컨텐츠 덕분에 곧바로 이해가 되었고 내 사이드 프로젝트에서도 응용하였다.

 

리덕스, 리코일과 비슷했다.(원리는 다르겠지만 일단 보기에는 비슷)

 

그냥 파일하나에 전역상태 다 몰아넣고 필요할때마다 꺼내 쓰는 것.

 

전역상태는 하이라이트 되어 있는 stores 파일에 다 몰아넣었다.

import { makeVar } from "@apollo/client"

ApolloClient에서 제공하는 makeVar를 통해 반응변수를 만든다. 이 반응 변수는 Apollo Client 캐시 외부에 로컬 상태를 저장하기 위해 사용된다.

 

내 생각에는 makeVar가 각각의 전역상태를 저장하는 저장소 역할을 하는 것 같다. 

리덕스가 하나의 store를 사용하는 반면 apollo를 이용한 상태관리는 여러 전역 상태를 여러 각각의 반응 변수에 저장하는게 아닌가 싶다.

 

리코일과 비슷한 시스템인것 같으면서도 뭔가 그렇다고 확신하진 못하겠다.

store파일에 때려 박아둔 함수를 참조하는 것이, 컴퍼넌트 내부에서 곧바로 useRecoilStateHook으로 직접 상태를 변경시키는 리코일과는 조금 다르게 느껴진다.

 

어쨌든 확실한건 리덕스보다는 훨~씬 편하고, 아직 불안정한 데모버전에 가까운 리코일보다는 안정성이 있다

라는 점이다!

 

이제 nest,graphQL로 서버를 만들어보기도 해야겠다. 이 사이드프로젝트는 천천히.. 정말 천천히.. 진행될듯하다.