[React] Recoil 내 Selector 간략 정리

REACT Recoil Selector

 

공식문서 정의

셀렉터Selector는 아톰atom이나 다른 셀렉터Selector를 입력으로 받아들이는 순수함수다.

"A Selector represents a piece of derived state."
셀렉터는 파생된 스테이트derived state의 일부를 저장한다.

*순수함수

부수적인 효과가 없는 함수. 즉, 똑같은 입력 값에 대해 항상 똑같은 출력값을 돌려 주는 함수이다.

 

비동기 통신과 같은 처리는 아톰atom만을 이용해서 하기 어렵다. (별도의 함수에서 비동기 통신으로 data를 받아 atom에 저장해 주어야 한다.) 이런 번거로운 처리를 셀렉터Selector로 한 번에 처리할 수 있다.

 

 

셀렉터Selector의 특징

- selector는 read-only (쓰기 불가능한) 객체 (RecoilValueReadOnly)

- return 값을 가지고 해당 값을 set(수정)할 수는 없다.

- useRecoilValue()로 값에 접근할 수 있다.

- 상위의 아톰atom이나 셀렉터Selector를 구독하고 있다가 해당 아톰이나 셀렉터가 변경되면 컴포넌트가 다시 렌더링 된다.

 

 

셀렉터Selector 기본형

key: 셀렉터를 구분할 수 있는 id 값으로 다른 셀렉터의 key와 중복되어서는 안된다.

get: get에서 파생된 state를 return한다. 이 state는 read-only(쓰기 불가능한) 상태이다.

        ex) get에서 비동기 통신을 처리한 경우 받아온 data가 selector에 저장된다.

set: read (쓰기 가능한) state의 값을 변경할 수 있는 함수를 return한다.

*set이 속한 셀렉터Selector의 state를 변경하려고 하면 무한 루프에 빠질 수 있기 때문에 다른 셀렉터Selector나 아톰atom의 값을 set 해야 한다.

 

function selector<T>({
  key: string,

  get: ({
    get: GetRecoilValue
  }) => T | Promise<T> | RecoilValue<T>,

  set?: (
    {
      get: GetRecoilValue,
      set: SetRecoilState,
      reset: ResetRecoilState,
    },
    newValue: T | DefaultValue,
  ) => void,

  dangerouslyAllowMutability?: boolean,
})

 

셀렉터패밀리SelectorFamily

셀렉터Selector, 겟get, 셋set의 콜백을 파라미터로 전달할 수 있다.

따라서 비동기 통신을 할 때나 파라미터를 전달해야 하는 경우 셀렉터Selector가 아닌 셀렉터패밀리SelectorFamily를 사용한다.

 

 

 

읽고 공부한 Reference

 

https://recoiljs.org/ko/docs/introduction/core-concepts/

주요 개념 | Recoil

Recoil selector를 사용한 비동기 처리

[Recoil] Recoil 200% 활용하기

 

순수 함수 (Pure Function)