Recoil은 왜 써야 할까?
Q. Recoil은 왜 만들어졌을까?
recoil은 ‘상태 관리’ 라이브러리이다.
그러면 ‘상태 관리’란 무엇일까?
xState 라이브러리의 제작자인 David Khourshid는
상태관리는 시간에 지남에 따라 상태가 변경되는 방식
이라고 정의하였으며
상태 관리를 위해서는
- 최초 값 저장
- 현재 값 읽기
- 값을 업데이트
이렇게 3가지 기능이 필요하다고 했다.
-
Q. 근데 이러한 상태관리 라이브러리는 redux, mbox등 많은 라이브러리가 있다. 그 중 왜 recoil을 써야 하나?
맞다. 여러가지 상태관리 라이브러리가 있다. 하지만 예를들어 redux를 사용하기 위해 부속 라이브러리(sugar, 툴킷 등)를 사용해야 하는데 recoil은 이러한 점들을 최소화하여 가장 리액트에 적합하게 사용할 수 있다는 장점이 있다.
recoil을 기본 철학은 ‘상태관리’를 ‘리액트’ 스럽게 이지 않을까 싶다.
redux에서 많이 지적되었던 보일러 플레이트가 많다는 문제점을 recoil에서는 useState, useReducer같은 hooks와 비슷한 인터페이스로 쉽게 제공한다.
-
Q. 그러면 기존 context API를 쓰면 되지 왜 recoil을 써야하나?
기본적으로 context API는 상태관리의 3가지 기능을 모두 할 수 없다.
context API로 전역 상태관리를 하려면 결국 useState나 useReducer 와 같은 로컬 상태관리를 통해 변경된 값을 외부에서 주입을 해주는 형태이다. 즉, 이는 ‘상태 관리’로 보기보단 ‘의존성 주입’이라고 보는게 옳다
-
Q. recoil은 어떻게 동작하나? recoil은 react tree와 직교되는 형태로 존재하며 상태 변경은 recoil의 개별 트리를 타고 구독한 react component에 들어간다. (props drills가 없다는 뜻) 가장 큰 장점은 component쪽의 로직을 건들지 않고 단독으로 상태 데이터를 변경할 수 있다는 것이다. 이를 통해 상태관리 로직을 분리할 수 있다. recoil의 가장 큰 철학 중 하나는 순수함과 파생 데이터 이다. 예를 들어 A와 B라는 상태를 결합해 C라는 상태를 만든다면
recoil이 만들어진 이유는 redux의 어려움을 해소하고 contextAPI의 부족함을 메꾸기 위해서다. 가장 큰 장점은 쉽게 사용할 수 있다는 거?
주요개념
recoil은 크게 atoms(공유 상태)와 selectors(순수 함수)로 나눌 수 있다.
즉, atoms ⇒ selectors ⇒ 컴포넌트 이러한 방식으로 데이터를 보내줄 수 있고
사용할 컴포넌트에서 훅 처럼 가져다 쓸 수 있다.
Atoms
atoms는 상태를 나타내며 atom이 업데이트 되면 구독된 컴포넌트들이 리렌더링된다 (useState의 state를 전역에서 사용하는 것과 동일)
atoms를 구성하는 것은 key와 defalut값으로
const fontSizeState = atom({
key: "fontSizeState",
default: 14,
});
가상돔에서 key값을 이용해서 atom을 검색하기 때문에 key값은 전역으로 고유해야한다.
또한 useState처럼 기본값을 default에 넣어줄 수 있다.
Selectors
selector는 atoms나 다른 selectors를 입력으로 받아들이는 순수 함수이다. Atoms와 동일하게 컴포넌트들이 구독할 수 있으며 변경시 구동하고 있는 컴포넌트들이 리렌더링된다.
selectors는 상태를 기반으로 하는 파생 데이터를 계산할 때 유용합니다. 즉, 최소한의 상태 집합만 atoms에 저장하고 이로 인해 파생되는 데이터는 selectors에 명시한 함수를 통해 계산하여 상태 변경을 줄여 결과적으로 리렌더링을 줄일 수 있습니다.
또한 selectors는 어떤 컴포넌트가 자신을 필요하느지, 자신이 어떤 atoms에 의존하는지를 추적하기 때문에
그러면 selectors와 atoms는 의 차이점은 뭐고 언제 무엇을 써야할까?
atom는 상태를 가지고 있습니다. 즉, atom이 변화할 경우 atom을 바라보는 모든 컴포넌트들의 상태가 변경되고 리렌더링이 발생합니다.
하지만 selector를 이용한다면 atom을 직접변경하는게 아닌 selector로 필터링된 값만 변경됩니다.
또한 selectors는 기본적으로 캐싱기능이 있습니다. 따라서 동일한 응답을 하는 요청은 보내지 않습니다.
이때 주의 점은 selectors에서 data-fetching은 react-query가 더 좋아보인다.
댓글남기기