[React] 전역 상태관리 라이브러리 'sagen'을 만들면서

이번에 전역 상태관리 라이브러리 sagen를 작업 후 배포하였습니다.

왜 만들었는가?

처음 리액트를 공부했을 시절 MobX가 유명하지 않았을 때라서 전역 상태를 관리하기 위한 방법으로 redux를 사용해야 했었습니다. 리액트의 내용도 겨우 이해하면서 프로젝트 개발을 진행하고 있었는데, redux의 내용을 이해하는 것은 너무 힘들었습니다.

props drilling 등과 같은 문제를 해결하기 위한 방법으로 전역 상태 관리 라이브러리를 사용하는 것이므로 프로젝트의 규모가 커지고 관리해야 할 데이터가 많다면 전역 상태 관리가 필요하다는 것을 인지는 하겠으나, 좀 쉽게 관리할 수는 없을까?? 하는 생각을 늘 하고 있었습니다.

ContextAPI

redux에 어느덧 적응하여 상태 관리를 하던 중, contextAPI가 리액트에 추가되었다는 소식을 접하게 되었습니다. 그당시 회사 프로젝트에서 상태 관리 라이브러리로 redux를 사용하고 있었지만, 상태 값을 추가하기 위해 액션을 만들고 스토어에 추가해주는 작업을 해주고 리듀서를 정의하고 하는 작업이 너무 고되게 느껴졌습니다. 그래서 테마 값과 같은 간단한 상태의 경우는 redux를 사용하지 않고 contextAPI를 사용해 작업을 진행했었습니다.

contextAPI로 왜 만족하지 못했나?

회사에서 에디터를 개발해야 할 일이 있었습니다. 리치 에디터에 여러 커스텀 기능들이 들어가면서 관리해야 할 데이터가 점점 많아지게 되었고, 이 값을 state로 관리한다면 유지보수가 매우 어렵게 될 것으로 생각되었습니다. 그렇다고 특정 컴포넌트에서만 사용되는 값을 redux store에 저장하는 것이 맞을까? 하는 생각이 들어서 이 상태 값을 ContextAPI를 사용해 관리하도록 작성하였습니다.

그리고 이 작업은 제가 ContextAPI 렌더링 이슈 포스팅을 작성하게 된 시발점이 됩니다..

ContextAPI에서 객체 값을 관리하고 있다면 컴포넌트에서 참조하고 있지 않은 객체의 필드 값이 변경되더라도 ContextAPI를 사용하고 있는 모든 컴포넌트가 리렌더링된다는 사실을 알게 되고, 이를 해결하기 위해 ContextAPI 기반의 createGlobalState 함수를 작성해 해결을 하게 되었습니다.

sagen

'sagen'을 만들기 이전에는 단순히 ContextAPI에 대해 알아보고, 이를 사용하고 있으면서 리렌더링 문제를 해결하고 있는 redux에 대해 알아보는 등의 작업을 진행했었습니다. 그러던 중, 차라리 내 취향대로 만들어서 사용하면 좋지 않을까? 하는 생각이 들어 'sagen' 라이브러리를 작성하게 됩니다.

sagen의 특징

'sagen'은 Provider 없이 상태를 관리하며, useContextAPI의 사용법과 유사하게 사용할 수 있어 ContextAPI를 사용해본 경험이 있다면 쉽게 사용할 수 있다는 장점이 있습니다.

내부 구조에 대한 자세한 내용은 아래 링크에서 확인할 수 있습니다.

[FrontEnd/React] - [React] 전역 상태 관리 라이브러리 제작기 (1)
[FrontEnd/React] - [React] 전역 상태 관리 라이브러리 제작기 (2)
[FrontEnd/React] - [React] 전역 상태 관리 라이브러리 제작기 (3)

또한, 사용 방법에 대한 글은 readme에서 자세히 확인할 수 있습니다.

만들면서

테스트 코드

라이브러리를 작업하면서 의도적으로 테스트 코드를 작성해야겠다고 생각하였습니다. 그리고 그 결과, 라이브러리를 릴리즈하는 시점에는 테스트 커버리지 100%를 달성할 수 있었습니다.

rollup

기존에는 webpack을 사용해 서비스를 번들링하였는데, 서비스에는 webpack, 라이브러리에는 rollup이 좋다고 하는 글이 생각나서 rollup을 이용해 번들링을 진행해보았습니다.

rollup의 장점으로 ₩ebpack에 비해 비교적 간단히 세팅을 할 수 있다고 느꼈는데, rollup을 이용해 트리쉐이킹 지원을 손쉽게 할 수가 있었어서 다음에 라이브러리를 다시 작성할 일이 생긴다면 그 때에도 rollup을 사용하게 될 것 같습니다.

728x90