Recoil 상태 관리 라이브러리

Atoms = Recoil의 상태

 

atom이 업데이트되면 각각의 구독된 컴포넌트는 새로운 값을 반영하여 다시 렌더링된다.

동일한 atom이 여러 컴포넌트에서 사용되는 경우 모든 컴포넌트는 상태를 공유한다.

 

선언법 : const '원하는 상태 이름' = atom({

  key : '보통은 상태 이름과 동일',

  default : '초기값 like useState의 괄호안의값' 

})

 

 

Selector = 파생된 상태

 

파생된 상태는 다른 데이터에 의존하는 동적인 데이터를 만들 수 있기 때문에 강력한 개념이다

get으로 가져온 atom을 가공해서 리턴해준다. 

 

선언법 : const '원하는 상태 이름' = selector({

  key : '보통은 상태 이름과 동일',

  get : ({get}) => {

     const filter =  get(의존성을 갖는 상태)

     switch(filter) {

        case 'show completed': 

        ...

       }

   }

})

 

 

 

<중요 함수들>

●  useRecoilState(state) = useState와 비슷, 모든 컴포넌트에서 불러와서 사용할 수 있다는 점만 다름

//state = atom 혹은 쓰기가능한 selector(set 함수가 있는)

 

● useRecoilValue(state) = 읽기만 할 때 많이 사용

//state = atom 혹은 selector

 

● useSetRecoilState = Recoil 상태값을 업데이트하기 위한 setter 함수를 리턴해주면 현재값에서 어떻게 변경할 지 작성할 수 있다.

쓰기만 할 때 많이 사용

//state = atom 혹은 쓰기가능한 selector(set 함수가 있는)

 

---

 

Todo 예제  (코드는 Recoil 자습서에 있다^^)

 

첫번째 : 아이템 생성 및 보여주기 

1. 투두리스트를 관리하는 상태를 만들어줌 = todoListState = atom

2. useRecoilValue로 가져온 상태값( todoListState )을 <TodoItem /> 컴포넌트의 인자로 뿌려줌

3. 아이템 추가 컴포넌트에서는 useSetRecoilState로 [현재 상태값, setter] 튜플을 받아서 setter로 todoListState값을 업데이트

( 아이템 변경, 삭제, 완료 토글 )

 

두번째 : 필터에 따라 아이템 보여주기

4. 선택한 필터에 맞는 리스트를 보여주기 위해 filter를 관리하는 상태를 만들어줌 = filterState = atom

5. filter라는 상태에서 파생된 상태, 즉 필터에 맞는 리스트를 반환하기 위해 selector를 만들어줌

= filteredTodoListState = 읽기 가능한 selector

6. 필터와 투두리스트에 의존성을 가져야하므로 selector의 get 함수를 통해 두가지의 상태값을 받아와서 switch문을 작성한다. 리턴값은 RecoilValueReadOnly

6. 리스트를 뿌려주는 컴포넌트에서 useRecoilValue로 selector상태를 가져와서 뿌려주면 처음에는 ( todoListState )atom을 그대로 보여준 것과 달리 한번 가공된 ( filteredTodoListState )selector상태가 보이게 된다. 

 

( get 함수만 제공되면 Selector는 읽기만 가능한 RecoilValueReadOnly 객체를 반환하고 set 함수 또한 제공되면 Selector는 쓰기 가능한 RecoilState 객체를 반환한다. )

 

세번째 : 리스트 통계 만들기

7. 투두리스트 상태를 가져와서 필요한 값들만 뽑아서 보여주기 위해 상태에서 파생된 상태인 selector를 만든다 = todoListStatusState

8. 의존성은 투두리스트에 가지므로 get 함수로 가져오고 계산한 통계값들을 selector의 리턴값으로 반환한다.

9. 통계를 보여주는 컴포넌트에서 useRecoilValue( todoListStatusState )로 상태값을 가져와서 보여준다.

 

 

 

+ 마지막은 굳이 왜 selector를 써야할까 생각했는데, 그냥 useRecoilState로 받아와서 뿌려보려고 하니까 첫번째 문제로 undefined에러가 나서 물음표 함수를 써야했고, 두번째로 각각의 요소들을 계산하는 함수를 따로 작성해서 보여주는 게 번거롭다는 생각이 들었다. 

 

 

잘 생각해보면 왜 페이스북이 만들었는지 알 정도로 반응이 빠르다 

맨위에서 상태를 관리하고 바로바로 적용되는 느낌이라 페이스북처럼 하위컴포넌트의 이벤트가 상위의 많은 컴포넌트에 적용되어야할 때 유용할 것 같다. 특정 게시물의 댓글을 달았을 때 몇번째 댓글인지 등등..