Recoil

왜 전역 상태 관리 라이브러리를 사용하기로 했나?

Needog 프로젝트를 진행하면서 Client와 Server을 분리하게 되다보니, 유저 페이지를 옮겨다닐시에 로그인한 상태인지에 대해 매번 서버의 요청하는 비용이 크다고 생각했다. 그래서 글로벌 상태로 유저의 정보를 다룰 필요가 있다고 느꼈다.
가령 로그인/로그아웃 버튼이나 글을 작성시에 로그인을 해야한다거나 프로필을 보여줄 때 등 전역적으로 유저의 정보가 사용되었기 때문에 보다 손쉽게 데이터를 관리하고자 전역 상태 관리 라이브러리를 도입해보자고 생각했다.

그런데 왜 Recoil?

가장 유명하기도 하고 그나마 익숙한 redux를 사용할 수도 있었을 것이다. 그렇지만 redux는 괜히 복잡하기도 하고, 어차피 프로젝트를 진행하는 김에 새로운 라이브러리를 시도해보고 싶었다.
도입에 앞서 문서를 먼저 읽어보았는데 기본적인 사용에 있어서는 많은 양의 학습이 필요하지 않아보였다. 또한 react hooks의 문법과 같은 방식의 익숙한 문법으로 사용할 수 있다는 점도 매력적이었다.
Mobx의 경우 아예 접해보지도 않았기에 제쳐두었다.

Redux, Mobx, Recoil에 대한 비교는 이미 자세히 다룬 블로그가 있어서 해당 문서들을 읽어보았다.

• redux, recoil 내용 정리
• Redux vs Mobx vs Recoil | Ykss

파일 구조

recoil을 도입하자고 생각하고 나서 가장 먼저 맞닥들인 문제는 파일 구조를 어떻게 조직할 것인가하는 문제였다. 공식 사이트에 예시가 나와있지만 만약에 atoms와 selectors가 많아진다면 어떤 식으로든 분리해서 다루는 편이 낫다고 생각했다.
구글링을 해보니 국내사이트에서는 그에 대한 내용을 찾지 못해서 해외 블로그의 글을 읽었다.

아래의 모든 내용은 Recoil Project Structure Best Practices | by Wesley Rast | Medium에서 부분적으로 발췌한 내용임을 밝힙니다.
글쓴이에게 허락을 받지 않고 개인적인 기록의 목적으로 발췌한 내용이므로 문제가 생길시에 삭제하도록 하겠습니다.

• Recoil의 전제중 하나는 큰 데이터를 구조를 작은 컴포넌트 부분으로 나누어 더 나은 성능을 갖도록 하는 것이다. 따러서 "atom"이라는 명칭을 사용한 것이다.

• 이는 우리의 atom을 작고 간단하게 유지하게끔 한다. 따라서 모든 컴포넌트가 신경쓰진 않는 변경이 발생할 수 있는 더 큰 데이터 구조가 아니라, 여러 컴포넌트가 자신이 필요한 작은 데이터 조각을 참조하게끔 하기 위함이다.

• 보통 atoms에는 State 접미사를 붙이고, selectors에는 Value를 붙인다. (...) 이런 방식은 당신이 Recoil atoms와 일시적인 지역 컴포넌트 state를 섞어쓰기 시작함녀 엄청나게 혼란스럽게 다가온다.

• 우리가 고쳐야할 주요 이슈는 다음과 같다
  1. 파일의 이름이 혼란스러운 방식으로 붙여졌다.

  2. 폴더 구조가 어떤 정보도 전달하지 못한다.
  3. 너무 많은 import 구문이 사용된다.
  4. useRecoilValue를 호출할 때 무엇이 반환될지 알 수 없다.

• 우리는 그것들을 좀더 정확한 "Atom"과 "with<something>"으로 바꿔야 한다.

내가 정리한 내용

그러므로 recoil/atoms와 recoil/selectors로 나누는 방식이 아니라 recoil/sample과 같은 식으로 나눠서 중심이 되는 하나의 atom만을 선언하고, 그 atom을 다루는 selectors를 한 곳에 묶어서 관리하도록 한다. import 구문을 줄이기 위해서는 recoil/sample/index.ts를 선언하여 atom을 export default sampleAtom하고 selector를 export {withSample}과 같은 식으로 관리한다.

자세한 내용은 블로그의 저자가 너무 친절하게 예제를 들어서 설명하고 있으니 읽어보면 다른 라이브러나 파일을 관리하는 방법에 있어서 좋은 팁을 얻을 수 있을 것 같다!

Vue와 Recoil?

이건 따로 찾아보진 않았지만 Vue가 데이터를 다루는 방식과 Recoil이 데이터를 다루는 방식이 비슷하다고 느꼈다. 물론 Proxy를 사용하는 Vue와는 내부적인 구현은 다르겠지만 Recoil의 atom, selector는 Vue의 data, computed와 어쩐지 닮았다는 생각이 든다.

Vue에서도 데이터를 중심으로 파생된 결과물을 순수함수의 형태로 정의된 computed를 통해 반환한다. Recoil의 selector도 atom에 정의된 데이터를 getter, setter을 통해서 반환하니까 비슷하지 않을까?

그래서 그런지 보다 사용방법을 금방 이해할 수 있었던 것 같다. 물론 자세한 응용은 아직 Vue도 Recoil도 미숙하다고 느낀다.