2023.02.08

📖오늘 배운  것

 

recoil

<RecoilRoot />

- 여러 <RecoilRoot> 를 사용하는 경우

 <RecoilRoot>는 여러 개가 같이 존재할 수 있으며 각각 독립적인 atom 상태가 providers/store된다.

  -> override를 false로 지정하지 않는 한 중첩 될 때 동일하게 발생

 

* override란?

:기본 값 true

 <RecoilRoot>가 다른  <RecoilRoot>와 중첩된 경우에  true라면  해당 루트는 각각 새로운 reocil 범위를 생성한다. 만약 false라면 루트의 자식들은 가장 가까운 조상  <RecoilRoot>의 recoil 값에 액세스한다.

 

 

atom

:recoil의 상태를 표현. 쓰기 가능한 RecoilState 객체를 반환한다.

• key: 내부적으로 atom을 식별하는데 사용되는 고유한 문자열
• default: atom의 초기 값
• effects_UNSTABLE: atom을 위한 선택적인 atom Effects 배열
• dangerouslyAllowMutability: recoil은 atom의 상태 변화에 의존하는데 만약 atom의 값이 변경될 경우 이를 거치지 않고 등록된 컴포넌트에 제대로 알리지 않은 채 상태가 변경될 수 있다. 이를 방지하기 위해 저장된 모든 값을 변경하지 않으며 경우에 따라 이 옵션을 사용하여 재정의할 수 있다.

atom과 상호작용 위해서 자주 사용되는 hooks

• useRecoilState(): atom 읽기, 쓰기 가능 
• useRecoilValue(): atom 일기 전용
• useSetRecoilState(): atom 쓰기 전용
• useResetRecoilState(): atom 초기값으로 초기화

- 비동기 함수를 사용하기 위해서는 selector 사용

 

 

selector

: 함수나 파생된 상태

 

- 정적 의존성이 있는 Selector

const mySelector = selector({
  key: 'MySelector',
  get: ({get}) => get(myAtom) * 100,
});

 

- 동적 의존성이 있는 Selector

const toggleState = atom({key: 'Toggle', default: false});

const mySelector = selector({
  key: 'MySelector',
  get: ({get}) => {
    const toggle = get(toggleState);
    if (toggle) {
      return get(selectorA);
    } else {
      return get(selectorB);
    }
  },
});

 

💭배운 점

 

리코일을 일단 공식문서를 보면서 이론을 이해하고 있는데 그냥 내용만 읽고있다보니 내가 이걸 코드로 칠 수 있을까? 하는 걱정이 든다. 코드로 치면서 공부해보고 싶은데 ... 간단하게 todo라도 실습해봐야하나 싶다. todo 실습이 공식문서에 있기도 하고 간단하게 하루 정도면 끝낼 수 있지 않을까?

읽고 있었던 리액트 공식문서도 봐야하고 타입스크립트 공식문서도 봐야한다! 지금까지 알고 있던 지식들을 좀 더 정제하는 과정이 필요할 것 같다. 딥다이브 읽는 것도 마찬가지! 

할 일은 늘어나는데 왜이리 늘어지는지 모르겠다!! 쉬는 것도 아니고 빡공하는 것도 아니고...?