만들면서 배우는 Reagent
ClojureScript의 React wrapper 라이브러리인 Reagent의 핵심 원리만 뽑아 간략하게 재구현하면서 그 구조를 알아보자.
TLDR. 본문 보러가기: https://code-read-blog.vercel.app/posts/didact-reagent
Reagent는 ClojureScript(CLJS) 진영에서 널리 쓰이는 React wrapper 라이브러리다. 단순히 React 인터페이스를 재공하는 것을 넘어서 코드를 “클로져”스럽게 짤 수 있도록 많은 기능을 제공해준다. 특히 상태관리를 위해 ratom이라는 독자적인 도구를 제공하는데, 이를 이용하면 `useState` hook과 비슷한 느낌으로 functional하게 컴포넌트의 상태 관리를 할 수 있다. (그런데 Reagent가 React hook 보다 훨씬 먼저 나왔다. React hook은 2019년에 (v16.8.0) 추가되었는데, Reagent는 2014년에 v0.1.0이 출시되었다.)
필자는 처음 Reagent를 사용해보고 그 완성도와 편리함에 깜짝 놀랐었다. 여느 Wrapper 라이브러리와는 달리 원본 라이브러리를 간접적으로 씀에 따라 발생하는 어색함이나 불편함은 없었고, 오히려 React를 직접 쓰는 것보다 편한 면도 많았다. 특히 ratom은 도대체 어떻게 동작하는건지 내부 구현이 매우 궁금했었다. 임의의 ratom의 값을 바꾸면, 자동으로 영향 받는 컴포넌트들이 알아서 다시 그려지는데, 따로 의존성을 연결해준 것도 아니기 때문이다.
언젠가 내부 구현을 공부해 봐야지라고 생각만하며 차일피일 미루다, 회사 스터디로 내부 구현을 살펴보게 되었는데, 생각보다 훨씬 코드가 짧고 간단해서 한번 더 놀랐다. 핵심 기능만 놓고보면 200줄이 채 되지 않고 로직도 복잡하지 않았다. 문제를 쉽게 풀어내는게 더 어려운걸 알기에 코드가 더욱 멋지게 보였다.
공부한 내용은 코드와 곁들여 볼 수 있도록 여기에 정리해 보았다. 코드 변화를 따라가면서 설명 글을 읽을 수 있어 이해에 도움이 될 것이다. Reagent 전체 코드를 직접 읽어보는 것도 추천한다.
