Vue 하다가 React 하는 개발자 이야기 5

Vue 하다가 React 하는 개발자 이야기 5

1. 오늘은 글을 두 개 씁니다. 제 친구가 리액트의 상태 관리에 대해 의견과, 아폴로 클라이언트 상태 관리에 대해 코드 공유를 해주었습니다. 짧게 공유해보고자 합니다.

// local state 지정
const initialData: IsLoggedIn = {
  isLoggedIn: !!getToken(),
}

cache.writeData({ data: initialData });

// 불러오기
const { data } = useQuery<IsLoggedIn>(IS_LOGGED_IN)
const isLoggedIn = !!data?.isLoggedIn

// Query
export const IS_LOGGED_IN = gql`
  query IsLoggedIn {
    isLoggedIn @client(always: true)
  }
`

// 상태 업데이트
login({
    variables: { data },
  update: (store, { data}) => {
    if (data?.login) {
      store.writeQuery<IsLoggedIn>({ query: IS_LOGGED_IN, data : { isLoggedIn: true } })
      saveToken(data.login.token)
    }
  },
})

2. 코드를 살펴보니, GraphQL과 완전히 사용방법이 같으니, 코드의 일관성 유지하는데 좋아보였습니다. 일단 친구의 의견은

• GraphQL을 쓰면 Redux 말고 Apollo Client로도 충분히 가능하다.
• 관리자 페이지 작성하는 정도면 props로 상태를 전달하는 것만으로도 충분할 것이다.

였습니다. 친구는 Apollo Client로 상태 관리를 안 쓸 이유가 없다고 생각했습니다. 그러나 앞선 글 (링크) 에서 충분히 고민한 내용이기에 내용은 생략합니다.

3. 또한 커뮤니티에서 MobX와 관련된 질문을 하신 분이 있어서 아래에 내용 정리를 해보았습니다.

• MobX

  • 러닝커브가 적지는 않다.
  • ES 표준과 React 의 방향이 틀어져 대규모 지각 변동이 있다.
    • Hook 대응으로 완전 다른 API 제안이 나옴 (mobx-react-lite)
    • 깔끔해 보이는 구문은 사실 class-field 와 decorator 문법이 낮은 스테이지일 때 그것을 “잘못” 활용한 것이라 API 가 변경되고 있다.
  • 번들 사이즈가 크다.
    • action 을 통해 state 를 업데이트한다는 기본 flux 원칙은 동일하게 지키지만, 이를 프록시로 자동화했다.
    • 단순해보이지만 복잡성은 높다.

• Redux

  • 라이브러리로서 하는 일이 적다. 그만큼 단순해서 배우기 쉽다.
  • 번들 사이즈가 가볍다. (9K)
  • 기본적인 원칙 외에는 전부 사용자에게 위임. (그래서 어렵다고 느낌)
  • Redux-Toolkit 이 학습곡선을 해결해 준다.
  • redux는 러닝 커브가 좀 있고, 코드가 지저분해진다. 또한 추가적으로 알아야 할 것들이 많다는 부분이 기본적으로 트레이드 오프 가능한 요소이다.

• Apollo Client 상태 관리 시스템

  • 쓰기에 따라서 아주 전략적이기도 하고 graphql 에 익숙하다면 좋은 선택지
  • 버그가 좀 많다는 자그마한(?) 단점

(답변을 해주신 Comet Kim 님께 감사드립니다.)

4. 두서 없이 정리하긴 했지만, 다른 분들께도 도움이 되기를 바랍니다. (_ _)