Recoil / [3] Selector - 선택자

 

- 본 게시물은 리코일 공식문서와 learnrecoil.com 강의를 바탕으로 작성된 글입니다. -

 

---

Recoil / [2] Atoms - 전역 상태 관리의 시작

---

이전 편에 이어서 진행.

 

Atom이라는 전역 상태를 시작할 원자 단위의 변수 지정을 맛봤다면,

지금부터는 약간쓰 객체지향의 개념인 get과 set과 비슷한 selector를 알아본다.

 

우선 나는 객체지향이고 함수형이고 그런 걸 몰라서 아주 아주 아주 아주 감으로만 get과 set개념을 알고 있어서,

호오옥 시나 모를 사람들을 위해서 간단하게 이 두 개의 개념을 설명함

 

get - 객체에서 데이터 뽑아옴

set - 객체에서 데이터 저장함

 

너무 간단하게 설명했는데, 이렇게 get과 set을 사용해야지 내 객체의 데이터 남에게 이상하게 노출되지 않고, 저장을 할 때도 안전하게 저장되게끔 하기 위함임

 

예를 들어서 사람이라는 객체가 있음

간단하게 사람에게 이름이라는 속성, 나이라는 속성이 있다고 치자.

이 객체를 불러와서 새로운 '사람 1'이라는 객체를 만든다고 가정함.

 

그때 이 '사람 1'에게는 고유한 이름과 나이가 있을 테니 이를 set을 통해 저장을 함.

근데 set을 통해 저장을 하면 좋은 게, set함수에 나이가 음수가 안 된다거나 100살이 넘으면 안된다거나 그러한 것들을 미리 지정해서

이 객체가 잘못 생성되는 것을 막아줄 수 있음

 

그리고 이 사람의 정보중 나이는 남에게 노출 안되고 이름만 노출되도록 하고 싶을 때,

두 속성을 은닉화함.

그리고 get이라는 새로운 함수를 만들어줘서 이 이름만 반환하도록 해줌

 

뭔가 장황하고 어려워졌네.

그러면 recoil의 selector 개념으로 슝

---

오늘 강의에서 작성했던 코드는 너무 길어서, 기능 위주로 설명하고 맨 아래 코드를 넣어두겠응

이번에 만들었던 예제는 환율 계산기다.

이번에 만들었던 예제

 

우선 이번 글의 메인 코드는 아래와 같다

const eurSelector = selector<number>({
  key: 'eur',
  get: ({get}) => {
    let usd = get(usdAtoms)

    const commissionEnabled = get(commissionEnabledAtom)

    if(commissionEnabled){
      const commission = get(commissionAtom)
      usd = removeCommission(usd, commission)
    }
    return usd * exchangeRate
  },
  set: ({set,get}, newEurValue) => {
    //@ts-ignore
    let newUsdValue = newEurValue / exchangeRate

    const commissionEnabled = get(commissionEnabledAtom)

    if(commissionEnabled){
      const commission = get(commissionAtom)
      newUsdValue = addCommission(newUsdValue, commission)
    }

    set(usdAtoms, newUsdValue)
  },
})

우선 recoil의 selector을 만들기 위해서는 atom과 비슷하게 정의를 해줘야 한다.

<> 안에 들어있는 건 typeScript이라서 타입 정의해준 거임

 

[GET]

get: ({get}) => {
    let usd = get(usdAtoms)

    const commissionEnabled = get(commissionEnabledAtom)

    if(commissionEnabled){
      const commission = get(commissionAtom)
      usd = removeCommission(usd, commission)
    }
    return usd * exchangeRate
  }

get을 설정하기 위해서는, atom처럼 똑같이 고유한 key값을 정해준 다음 get 매소드를 정의해준다.

 

기본적으로 selector의 get 메서드는 get함수를 받아오며,

여기서의 get 함수는 다른 아톰들의 get값, 그러니까 다른 아톰의 디폴트 값을 들고 올 수 있는 친구다.

 

위에서 get에서 usdAtoms을 불러오는데 이렇게 불러오면 usd에 usdAtom의 현재값을 넣겠다는 말이다.

그리고 아래 commissionEnabled의 아톰은 위의 사진에서 include forex commisiion을 켜고 끄고에 따라 t/f 값이 바뀌는 아톰이다.

 

그래서 만약 커미션, 그러니까 여기서는 환율 변화에 관한 이야기인데, 커미션이 켜져 있으면 커미션의 숫자만큼 값을 계산해서

세금이 계산된 값을 return 하는 함수가 되는 것이다.

 

왜 이렇게 귀찮게 할까 생각할 수도 있지만, 매번 내가 원하는 값을 불러올 때 새로운 함수를 만들어 계산하는 것보다 데이터의 전달 안전성이 높아지기 때문이라고 생각하면 좋지 않을까아?!

 

나도 이유는 모르겠는데, 보통 객체지향적으로 설계를 하니까 일단 이렇게 해야지! 하고 넘어갔음.

아마 위에서 말한 데이터 무결성이나 은닉 화가 아닐까 싶음

 

 

[SET]

  set: ({set,get}, newEurValue) => {
    //@ts-ignore
    let newUsdValue = newEurValue / exchangeRate

    const commissionEnabled = get(commissionEnabledAtom)

    if(commissionEnabled){
      const commission = get(commissionAtom)
      newUsdValue = addCommission(newUsdValue, commission)
    }

    set(usdAtoms, newUsdValue)
  },

set함수 또한 정의를 해줘야 하는데, set함수는 기본적으로 두 개의 함수를 가져온다.

 

첫 번째는 객체형태로 set함수, get함수를 받아오며 그 다음에 오는 값은, 새롭게 들어오는 usd의 값임(내가 위에서 입력하는 값)

set함수는 좀 특이한데, set에 첫 번째 인자로 내가 변경할 아톰, 두번째로는 바꿀 값을 이렇게 지정해주면 첫번째 인자로 정해줬던 아톰의 값이 바뀌는 함수다.

 

결국 위의 set함수는 입력되는 값을 활용해서 set함수를 통해 usdAtom의 값을 새로운 값으로 바꿔주는 역할을 한다.

 

 

이렇게 정의한 get과 set을 사용하기 위해선, 기존 useReocilState와 동일한 방식을 사용해준다

const [eur, setEur] = useRecoilState(eurSelector);

이렇게 해서 생각해보니, 아! useState도 처음에 오는 녀석은 get이고 뒤에오는 녀석은 set인것이구나 하는 것을 깨닳았다

 

이상

 

 

강의가 궁금하다면 아래 링크를 확인

Learn Recoil - Free Recoil.js course