Facebook에서 만든 React 상태 관리 라이브러리 Recoil에 대해 알아보기
안녕하세요. 휴먼스케이프 Frontend Software Engineer 남현욱입니다.
이번 포스트에서는 Facebook에서 만든 React 상태 관리 라이브러리, Recoil에 대해 알아보려고 합니다.
React에서의 상태 관리
복잡한 React 웹 앱에서는 상태 관리가 개발자의 주요 과제이자 어려운 작업으로 여겨지고 있습니다. 어떤 하나의 상태 변경이 하나 이상의 다른 컴포넌트에 영향을 끼칠 수 있기 때문입니다.
예를 들어, 인스타그램을 클론 코딩한다고 가정하면 ‘좋아요' 동작을 취하는 순간 다른 곳에 많은 영향을 끼칩니다.
해당 사진의 좋아요 개수 1 증가
해당 사진을 업로드한 유저에게 알림 보내기
해당 사진에 좋아요를 누른 유저 기록
기타 등등..
이렇듯 하나의 변경이 단순하게 하나의 변경으로 끝나지 않는 경우가 많아서 Redux, MobX와 같은 상태 관리 라이브러리가 등장하게 되었습니다.
휴먼스케이프에서는 Redux와 Redux Saga를 주로 사용하고 있습니다. 개발 블로그에 있는 포스트들을 참고해주세요 :)
Recoil의 등장 배경
하지만 Redux와 MobX의 API는 단순하지 않았고, 근본적으로 React에서 사용하기 위해 나온 것이 아닙니다. (react-redux 혹은 mobx-react 같이 React 전용 wrapper 라이브러리가 있습니다.) 그렇다고 React만으로 해결하려고 하니 그것조차도 쉬운 일이 아니었습니다.
그래서 Recoil 개발자분들께서는 API와 동작 방식을 가능한 React스럽게(Reactish) 가져가면서 현상을 해결하려고 Recoil을 제작했다고 합니다.
참고 링크: https://recoiljs.org/docs/introduction/motivation
핵심 개념
Recoil은 Atom으로부터 시작해서 Selector를 거쳐 React 컴포넌트까지 전달되는 하나의 Data-Flow Graph를 만들게 합니다.
Atom은 컴포넌트들이 구독(subscribe)할 수 있는 단위이고, Selector는 동기적 혹은 비동기적으로 상태를 변환합니다. 이 두 가지의 핵심 개념으로 이루어진 라이브러리입니다.
Atom
Atom은 상태의 단위입니다.
Atom이 업데이트되면 해당 Atom을 구독하고 있던 모든 컴포넌트들이 새로운 값으로 리렌더됩니다. 또 여러 컴포넌트에서 같은 Atom을 구독하고 있으면 그 컴포넌트들이 상태를 동일하게 공유합니다.
Selector
Selector는 다른 Atom들 혹은 Selector들을 받아 사용하는 순수 함수입니다.
받은 Atom들 혹은 Selector들 중 어떤 것이 업데이트되면, Selector 함수는 다시 평가(re-evaluate)됩니다. Atom처럼 컴포넌트에서 구독할 수 있으며, Selector 함수가 다시 평가될 때 컴포넌트가 리렌더됩니다.
참고 링크: https://recoiljs.org/docs/introduction/core-concepts
여담: Recoil만의 장점
Recoil은 위에서 설명드린 것과 같이 사용법이 정말 간단합니다. 단지 Atom과 Selector를 생성하고, 컴포넌트에서 사용하는 것 이외에는 할 일이 없습니다.
이 API가 너무 마음에 들어서, 투두리스트나 여러 예제들을 해보며 몸소 느낀 장점들을 아래에 정리해드리겠습니다.
동적 key를 가진 다른 상태 생성
Recoil에서는 동적인 key를 가진 상태 생성도 가능합니다.
이렇게 동적으로 상태를 생성하면, 여러 개의 비슷한 데이터를 다룰 때 (Adobe Photoshop의 Layer같은 상황) 리스트에 보관하는 대신 각자의 상태가 독립되어 변경한 아이템 하나만이 업데이트하게 됩니다.
추가: Recoil 0.0.8 버전부터 atomFamily, selectorFamily라는 이름으로, 이 기능을 지원하는 새로운 API가 나왔습니다. https://recoiljs.org/blog/#recoil-008
Concurrent Mode 지원
Concurrent Mode 설명은 아래 링크를 참고하세요. https://reactjs.org/docs/concurrent-mode-intro.html
Recoil은 Concurrent Mode를 정말 쉽게 지원합니다. 아래처럼 비동기 Selector를 만들고 Suspense로 감싸주기만 하면 됩니다.
덧붙이기식 개발
여담: 기존에 만들어둔 API의 수정이나 변경 없이 새로운 기능을 덧대어 붙여간다는 의미로 덧붙이기식 개발이라는 이름을 붙였습니다 :)
Recoil의 Selector 덕분에, 덧붙이기식 개발을 할 수 있었습니다. 두 개의 커밋을 올려드리고 그 일부를 보여드리면서 설명하겠습니다.
TodoList 필터 추가하기
TodoList 통계 추가하기
TodoList의 통계 기능을 만드는 예시
코드를 보시면, 일부 UI 변경을 제외하고는 대부분 코드를 추가함으로써 새 기능을 만들어냅니다. 활용하려던 상태는 그냥 get() 함수를 이용하여 불러오기만 하면 됩니다. 또 이렇게 개발하더라도 IDE의 Definition 추적 기능 덕분에 어디서 어떤 식으로 플로우가 그려지는지 명확히 알 수 있습니다.
마무리
지금까지 Facebook에서 만든 React 상태 관리 라이브러리, Recoil에 대해 알아보았습니다. 아직은 정식 버전이 아니라 실무에서 사용하기는 조금 이르지만, 더 성숙해진다면 실무에서 바로 사용할 정도의 매력이 있지 않나요?
다음 포스트에서는 Recoil에 대해 조금 더 심화된 내용을 알아보도록 하겠습니다. 감사합니다.
Get to know us better! Join our official channels below.
Telegram(EN) : t.me/Humanscape KakaoTalk(KR) : open.kakao.com/o/gqbUQEM Website : humanscape.io Medium : medium.com/humanscape-ico Facebook : www.facebook.com/humanscape Twitter : twitter.com/Humanscape_io Reddit : https://www.reddit.com/r/Humanscape_official Bitcointalk announcement : https://bit.ly/2rVsP4T Email : support@humanscape.io
가입하기
