전역 상태 관리 라이브러리는 Redux만 있는 것이 아니다.

이전에 Recoil을 살짝 찍먹만 해보고 이거 괜찮다면서 히히히 하면서 조금 정리했었는데, 얼마 전에 세현 매니저님께서 이야기한 것과 React 세션에서 이야기 나온 것들이 생각나기도 했고 Recoil 관련 세션에서도 봤던 이미지가 있어서 전역 상태 관리 라이브러리들에 호기심이 생기기 시작했다.

이 이미지는 Recoil이 궁금해지면서 봤던 영상에 나왔던 프레젠테이션 일부인데, 여기서 공부를 했다! 라고 할 수 잇는 건 Redux와 Context API 뿐인 것 같다. (Context API는 Redux와 많이 비슷해 쉽게 익힐 수 있었다.)

그 와중에 여러 매니저님이 이야기하신 부분 중에 ‘클라이언트로 전역 상태를 관리’하는 경우가 있고, ’서버에서 전역 상태를 관리’하는 게 있다고 말씀하신 게 떠올랐다.

아, 그렇다면.. 지금 당장 공부에 도전해볼 것은 저 Server Cache 겠구나!

그래서 약간의 검색 후, 현재 서버와 관련해 자주 쓰는 것이 ‘React-query’가 아직은 SWR보다 많이 쓰이고 있다고 하여 해당 내용을 공부해보기 시작하려 한다.

이래저래 고민이 많아서 어떤 걸 보는게 좋을까 하다가 React Query 관련 세미나가 있었길래 배민 FE팀은 왜 이 React Query를 쓰게 됐는지 궁금하여 잠시 영상을 보고 정리해봤다.

https://www.youtube.com/watch?v=MArE6Hy371c&t=2s

상태 관리?

• 라이브러리가 먼저 떠오른다: Redux, MobX, Recoil...
• 상태를 관리하는 것'이란?
  • 주어진 시간에 시스템을 나타내는 것으로 시간에 따라 언제든지 변경될 수 있다.
  • 즉, 문자열, 배열, 객체 등의 형태로 응용 프로그램에 저장된 데이터들.
  • 개발자 입장에서 보면 관리해야하는 데이터들을 말한다.
• ‘모던 웹 프론트엔드 개발'?
  • 예전에는 그 기능들이 단순해서 역할이 작았다고 한다면, 오늘날에는 수많은 작고 큰 기능들이 나타나면서 UI/UX의 중요성과 함께 프로덕트 규모가 많이 커지고 FE에서 수행하는 역할이 늘어나면서 관리하는 상태가 많아지게 됐다.
  • 이것을 모던 웹 프론트엔드 개발이라고 말할 수 있다.
• '상태관리'는?
  • 상태를 관리하는 방법
    • 프로덕트가 커지면 그만큼 더 어려워진다.
  • 상태들은 시간에 따라 변화한다.
  • React에선 단방향 바인딩으로 이어지므로 Props Drilling이라는 이슈도 존재한다.
  • 이런 문제를 방지하기 위해 Redux와 MobX같은 라이브러리를 활용해 해결하기도 한다.

배민의 주문 프론트엔드 프로덕트를 보며 가진 고민?

• 배민 주문 페이지의 어지간한 부분에선 웹뷰를 사용하고 있다.