[TIL] Recoil Selector

💡 TIL 20231029 - Recoil Selector

---

Selector란?

• Derived state
  • 입력받은 state를 변형해 반환하는 순수함수를 거쳐 반환된 값
  • Selector는 파생된 state(derived state)의 일부를 나타낸다. 즉, 기존 state를 가져와서, 기존 state를 이용해 새로운 state를 만들어서 반환할 수 있다. 기존 state를 이용만할 뿐 변형시키지 않는다. derived state는 다른 데이터에 의존하는 동적인 데이터를 만들 수 있기 때문에 강력한 개념이다.
• atom의 output을 변형시켜 주는 개념
• To Do 목록들을 카테고리별로 분류하려면 어떻게 할까?
  • 컴포넌트 자체에서 전체 To Dos 배열을 불러온 뒤 분류할 수도 있지만, 이것은 데이터 자체를 바꾸지는 않는다. 컴포넌트는 데이터를 렌더링할 뿐
  • 한 곳에 데이터를 몰아놓고 컴포넌트 안에서 그걸 수정해서 렌더링하는 대신, atom에 데이터를 모아두고 selector로 데이터를 변형하려는 것

---

Selector의 요소들

const userNameSelector = selector({
  key : 'userName',
  get : ({ get }) => {
    const user = get(userState);
    return `${user.firstName} ${user.lastName}`
  },
  set : ({ set }, name) => {
    const names = name.split(' ');
    set(
      userState,
      (prevState) => ({
        ...prevState,
        firstName : names[0],
        lastName : names[1] || ''
      })
    )
  }
})

key

• atom의 key와 마찬가지로 각 selector의 고유값

 

get

• 데이터를 가공하는 함수
• 첫 번째 인자로 받는 객체 안의 get을 통해 atom이나 다른 selector에 접근할 수 있으며, 이 때 자동으로 종속관계가 생성된다.
• 따라서 접근한 atom 또는 selector가 업데이트되면 이 함수도 다시 실행된다.

 

set

• 이 속성은 필수는 아니지만, set 속성을 사용한다면 해당 selector는 writable RecoilState 객체를 반환한다.
• 첫 번째 인자로 객체(get, set, reset을 포함), 두 번째 인자로 새로운 값을 받는다.
• 첫 번째 인자 객체 안에 있는 set으로 다른 atom 값을 set할 수 있다.

 

 

 

---

참고 사이트

Recoil 정리하기