💡 리코일 공식 문서 참고하여 정리 및 공부

---

개념

Atoms(공유 상태)

• 컴포넌트가 구독할 수 있는 상태의 단위
• atom 업데이트 -> 각각의 구독된 컴포넌트는 새로운 값을 반영하여 리렌더링
• 런테임에서 생성될 수도 있음
• atom 함수를 사용하여 생성

고유한 key값과 기본값을 가짐

const fontSizeState = atom({
  key: 'fontSizeState',
  default: 14,
});

useRecoilState hook

• useState와 비슷하지만 상태가 컴포넌트 간에 공유될 수 있다는 차이가 있음

function FontButton() {
  const [fontSize, setFontSize] = useRecoilState(fontSizeState);
  return (
    <button onClick={() => setFontSize((size) => size + 1)} style={{fontSize}}>
      Click to Enlarge
    </button>
  );
}

Selectors(순수 함수)

• atoms 상태값을 동기 또는 비동기 방식을 통해 변환

• 상위의 atoms 또는 selectors가 업데이트 되면 하위의 selector 함수도 다시 실행

• atoms처럼 구독할 수 있으며, selectors가 변경되면 컴포넌트 다시 리렌더링

• 상태를 기반으로 하는 파생 데이터를 계산하는데 사용

• 최소한의 상태만 atoms에 저장하고 다른 데이터들은 selectors 함수를 통해 효율적으로 계산함으로써 쓸모없는 상태의 보존을 방지

const fontSizeLabelState = selector({
  key: 'fontSizeLabelState',
  // get : 계산될 함수
  get: ({get}) => {
    const fontSize = get(fontSizeState);
    const unit = 'px';

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

useRecoilValue() : 하나의 atom이나 selector를 인자로 받아 반환

function FontButton() {
  const [fontSize, setFontSize] = useRecoilState(fontSizeState);
  const fontSizeLabel = useRecoilValue(fontSizeLabelState);

  return (
    <>
      <div>Current font size: ${fontSizeLabel}</div>

      <button onClick={setFontSize(fontSize + 1)} style={{fontSize}}>
        Click to Enlarge
      </button>
    </>
  );
}

---

적용

전에 작성한 [TypeScript] 병원 예약 시스템 구현에서 사용된 recoil 정리

(1) recoil 상태를 루트 컴포넌트에 넣어 Main 컴포넌트에 적용

import { RecoilRoot } from 'recoil';

function App() {
  return (
    <ThemeProvider theme={theme}>
      <GlobalStyle />
      <Layout>
        <RecoilRoot>
          <Main />
        </RecoilRoot>
      </Layout>
    </ThemeProvider>
  );
}

(2) 동일한 상태 값을 캘린더 / 예약 / 조회에 사용함으로 globalState라는 이름으로 atom() 함수 생성

// atom.ts
export const globalState = atom<DefaultType[]>({
  key: 'globalState',
  default: [],
});

(3) Main 컴포넌트에서 마운트 시 useSetRecoilState() 훅으로 globalState 업데이트

해당 state가 필요한 컴포넌트에서 호출하여 사용

const Main = () => {
  const setGlobalAtom = useSetRecoilState(globalState);

  useEffect(() => {
    setGlobalAtom(DATA.data);
  }, []);

  return (
    <Wapper>
      <Calendar />
    </Wapper>
  );
};

export default Main;

// DATA 형태
const DATA = {
  data: [
    {
      id: 220101,
      user_name: '홍길동',
      user_phone: '010-3286-6377',
      booking_date: '2022-10-17',
      booking_time: '16:00',
      categories: '검진',
    },
    ...
  ]
}

(4) 예약 정보(globalState)를 Calender에서 예약 조회/등록에 사용해야 하기 때문에 useRecoilValue()훅으로 globalState를 적용

// Calendar.tsx
const reserved = useRecoilValue(globalState);
const Data = reserved.map(function (item) {
  const obj = {
    title: `${item.booking_time} ${item.user_name} ${item.categories}`,
    start: item.booking_date,
    end: item.booking_date,
  };
  return obj;
});

(5) fullcalendar 라이브러리로 구현한 Calendar에 Data 적용

// Calendar.tsx
<FullCalendar
  locale={'ko'}
  plugins={[dayGridPlugin, interactionPlugin]}
  dayMaxEventRows={true}
  events={Data}
  eventColor="#EFB33F"
  selectable={true}
  dateClick={(info: DateClickArg) => {
    setSelectDate(info.dateStr);
    reserveHandler();
  }}
/>