2023.02.07

📖오늘 배운  것

recoil

• Atom: 데이터 상태의 단위, atom은 어떤 컴포넌트에서나 읽고 쓸 수 있으며 atom 값을 읽는 컴포넌트들은 암묵적으로 atom을 구독한다. 따라서 atom에 변화가 있으면 구독하고 있는 모든 컴포넌트가 재 렌더링된다.
• Selector: atom에서 state를 가져온 후 새로운 state를 만들어서 반환 -> 현재 state를 가지고 데이터를 가공하는 데 주로 사용하는 것 같다. ex) todo 리스트 필터링, todo 리스트 통계 ...

const fontSizeLabelState = selector({
  key: 'fontSizeLabelState',
  get: ({get}) => {
    const fontSize = get(fontSizeState);
    const unit = 'px';

    return `${fontSize}${unit}`;
  },
});

get: get 인자를 통해 atoms와 다른 selectors에 접근할 수 있다. 다른 atoms나 selectors에 접근하면 자동으로 종속 관계가 생성 -> 참조했던 다른 atoms나 selector가 업데이트되면 이 함수도 다시 실행된다.

- get 함수만 제공될 경우

: 읽기만 가능한 RecoilValueReadonly 객체 반환

 

- set 함수도 제공될 경우

:쓰기 가능한 RecoilState 객체 반환

 

1. useRecoilState(): 상태값을 가져오고 수정할 수 있다.
2. useRecoilValue(): 상태값을 가져오기만 한다. read only
3. useSetRecoilState(): 상태값을 수정할 수만 있다. write only
4. useResetRecoilState(): 상태값을 초기값으로 리셋한다.

 

recoil 비동기 통신

- atom과 selector로 동기적 통신하기

const currentUserIDState = atom({
  key: 'CurrentUserID',
  default: 1,
});

const currentUserNameState = selector({
  key: 'CurrentUserName',
  get: ({get}) => {
    return tableOfUsers[get(currentUserIDState)].name;
  },
});

function CurrentUserInfo() {
  const userName = useRecoilValue(currentUserNameState);
  return <div>{userName}</div>;
}

function MyApp() {
  return (
    <RecoilRoot>
      <CurrentUserInfo />
    </RecoilRoot>
  );
}

만약 user의 이름이 데이터베이스에 저장되어 있다면 promise를 리턴하거나 async 함수를 사용하기만 해도 된다.

const currentUserNameQuery = selector({
  key: 'CurrentUserName',
  get: async ({get}) => {
    const response = await myDBQuery({
      userID: get(currentUserIDState),
    });
    return response.name;
  },
});

function CurrentUserInfo() {
  const userName = useRecoilValue(currentUserNameQuery);
  return <div>{userName}</div>;
}

propmise가 resolve되기 전에는 무엇을 렌더할 수 있을가?

-> React Suspense를 이용해서 대체  ui를 렌더할 수 있다.

function MyApp() {
  return (
    <RecoilRoot>
      <React.Suspense fallback={<div>Loading...</div>}>
        <CurrentUserInfo />
      </React.Suspense>
    </RecoilRoot>
  );
}

 

만약 Suspense를 사용하지 않는 경우에는 useRecoilValueLoadable() 훅을 사용해서 렌더링 중 상태를 확인할 수 있다.

function UserInfo({userID}) {
  const userNameLoadable = useRecoilValueLoadable(userNameQuery(userID));
  switch (userNameLoadable.state) {
    case 'hasValue':
      return <div>{userNameLoadable.contents}</div>;
    case 'loading':
      return <div>Loading...</div>;
    case 'hasError':
      throw userNameLoadable.contents;
  }
}

 

에러는 ErrorBoundary를 이용해서 잡을 수 있다.

function MyApp() {
  return (
    <RecoilRoot>
      <ErrorBoundary>
        <React.Suspense fallback={<div>Loading...</div>}>
          <CurrentUserInfo />
        </React.Suspense>
      </ErrorBoundary>
    </RecoilRoot>
  );

 

 

 

 

💭배운 점

팀 프로젝트에 리코일을 사용하기로 해서 리코일에 대한 공부를 처음 시작했다. 상태관리를 제대로 사용해본 적이 없어서 아직 걱정이 많았다. 이전에도 context API만 사용해봤는데 리코일 공식문서를 읽어보니 기존 리액트 훅 사용과 크게 다르지 않아서 보다 쉽게 배울 수 있을 것 같다는 생각이 들었다. 데브코스 강의에서 리덕스를 간단하게 경험해본 적이 있었는데 정말 어렵고 이해가 안됐던 기억이 있어서 더 걱정했었다. 그런데 실제로 봐보니 리덕스보다 더 간단하고 사용방법도 복잡하지 않은 것 같다. selector를 효율적으로 쓰려면 리코일에 익숙해져야겠다라는 생각이 들었지만 이건 공부하고 프로젝트 진행하면서 익숙해져야 할 것 같다.

리코일에 능숙해지면 나중엔 리덕스도 다시 제대로 배워보고 싶다. 그러면 리코일이 얼마나 간편한지 더 체감될 것 같다.