Recoil, Typescript/ useRecoilState, useRecoilValue

Recoil Library 

 

Recoil은 페이스북에서 만든것으로 전역 상태관리 라이브러리다.

자세한 설명은 공식문서   https://recoiljs.org/  

 

Recoil 구성 요소 간단정리 (React - Typescript)

 

1. RecoilRoot 

리코일은 상위 디렉토리(부모)에 아래와 같이 (Root.tsx)에 씌워놓음으로써 다른 요소들 사용이 가능하다.

 

2. Atom

;물질을 이루는 가장 작은 입자이며, 구체적이고 원소를 셀수 있는 Atom을 별개의 장소에 보관하여 필요시 끌어다 쓰는 컨셉으로 Atom이란 단어를 사용한 것으로 보인다. 마치 요리할때 자주 사용하는 재료들을 소분하여 (양파, 당근, 버섯, 파, 등등...) 요리할때 마다 필요한 곳에 쓰는 것을 추상화도 해보았다.

 

Atom은 State의 내용을 가지고있는 구성으로 어떤 곳에서든 이 내용을 끌어다 쓸수있다. 

그리고 위 구성내용은 useRecoilState()를 통해서 읽어올 수 있다.

 

3.Selector

아래와 같은 예시로 사용되고 있으며,

state에서 수정된 변수 값을 'get'하여 끌어다 쓸수 있게 도와준다는 개념으로 이해할 수 있다.

이외 다른 tsx에서 값을 끌어다 쓰기위해서 아래와 같은 명령어를 참조한다.

 

useRecoilValue(): atom 혹은 selector의 값만 반환한다.

useRecoilState(): atom의 값과 그걸 수정하는 modifier 함수를 반환한다.

useRecoilState()의 경우 React의 value, setValue 와 유사한 개념으로 사용된다.