[React] Recoil - 시작하기

들어가며

요즘 Recoil이라는 친구가 핫하길래 이번에 공부를 하려고 한다. 

먼저 공식 사이트에서 Recoil에 대해서 알아보고 시작하기를 통해서 환경을 세팅해볼 계획이다.  

 

Why Recoil ? 

전역 상태 관리에서 가장 유명한 라이브러리는 Redux일 것이다. 

그런데 왜 Recoil을 요즘 이곳 저곳에서 도입하려고 할까? 

 

그러려면 Redux를 사용했을 때의 단점을 한번 생각해봐야 할 것이다. 

 

1. 거대하다!

Redux으로 상태 관리를 하려고 할 때 작성자가 느끼는 가장 큰 부담감은 너무 크다는 것이다. 

상태를 관리하기 위해서 Store를 만들고, 그거에 맞춰서 Action, Reducer , .... 사용하기 위해서 

준비해야하는 것이 많다고 느껴진다. 

 

2. 어렵다!

사실 위 " 거대하다! " 와 이어지는 부분으로 Redux를 사용해서 코드를 구현하려면 공부해야 하는

부분이 많다고 느껴진다. ( 구현해야 하는 것이 많기 때문에 ... ) 

 

위 두가지 사항에 대해서 Recoil은 Redux와 어떻게 다른지 생각하면서 공부할 계획이다. 

 

Recoil 공식 사이트의 소개 문구

Recoil의 공식 사이트에서는 Recoil에 대해서 위와 같이 말하고 있습니다. 

과연 얼마나 어썸한지 알아보자!

 

This is Recoil ! 

Recoil에서는 외부 전역 상태 관리 라이브러리보다 React 자체에 내장된 상태 관리 기능을

사용하는 것이 가장 좋다고 합니다. 

 

하지만 React에서 컴포넌트의 상태는 공통 상위 요소에서부터 공유할 수 있고 이는 곳

Props Drilling이 발생하는 문제 또는 거대한 트리가 다시 렌더링 되는 문제가 발생할 수 있다. 

 

그리고 Context는 가지고 있는 상태 중 특정 상태만 변경되었을 때 해당 상태를 구독하고 있는

컴포넌트만 리렌더링 시키는 것은 어려운 일입니다. 

 

이런 문제를 Recoil에서는 React 스럽게 유지하면서 개선하려고 노력한다고 합니다. 

 

과연 어떨지 한번 공부해보겠습니다. 

 

주요 개념 

Recoil 홈페이지에서는 Recoil을 사용하면 공유 상태(atoms)에서 순수 함수(selectors)를 거쳐 

React 컴포넌트로 내려가는 data-flow graph를 만들 수 있다고 합니다. 

data-flow graph?

 

Atoms ? 

Atoms는 상태의 단위라고 합니다. 이것은 업데이트와 구독이 가능하고 업데이트가 발생하면 

구독한 컴포넌트는 새로운 값을 반영해서 다시 렌더링 된다고 하네요.

 

동일한 Atom을 여러 컴포넌트에서 사용하면 모든 컴포넌트는 같은 상태를 구독한다고 합니다. 

 

Selectors ? 

Selector는 Atoms이나 다른 Selectors를 입력으로 받아들이는 순수 함수입니다. 

상위의 Atoms 또는 Selector가 업데이트되면 하위의 Selector 함수도 다시 실행됩니다. 

 

흠.... Atoms은 어떤 것인지 어림 짐작으로 이해가 되는데, Selector는 

설명만으로는 확실하게 이해가 되지 않네요.