Recoil의 selector를 어떻게 활용할 수 있을까? - somedaycode/airbnb GitHub Wiki

목표: Recoil Selector 활용

HOW?

• 사용자의 숙소 조건 검색에 따른 상태를 selector 함수를 넘겨주어 조건이 변경 될 때마다 서버에 데이터를 요청하고 받아왔습니다.

관련코드

import { atom, selector } from 'recoil';

// 숙소 검색 결과를 위해 필요한 관련 atom 상태들
import { reservationString } from './date';
import { queryPrice } from './price';
import { queryGuest } from './guests';

// default value
const mapSizeCoords = atom({
  key: 'mapSizeCoords',
  default: {
    ne_latitude: 37.57992249446141,
    ne_longitude: 127.05564290690467,
    sw_latitude: 37.55468331278949,
    sw_longitude: 126.92407277442867,
  },
});

const queryLocation = selector({
  key: 'queryLocation',
  get: ({ get }) => {
    const coordsMap = get(mapSizeCoords);
    const { ne_latitude, ne_longitude, sw_latitude, sw_longitude } = coordsMap;
    return `ne_lat=${ne_latitude}&ne_lng=${ne_longitude}&sw_lat=${sw_latitude}&sw_lng=${sw_longitude}`;
  },
});

// atom을 조합하고 가공하여 fetch 요청
const accomodationList = selector({
  key: 'accomodationList',
  get: async ({ get }) => {
    const reservation = get(reservationString);
    const price = get(queryPrice);
    const guest = get(queryGuest);
    const boundary = get(queryLocation);
    const query = `${reservation}&${price}&${guest}&${boundary}`;
    const res = await fetch(
      `http://3.35.178.32:8080/accomodation/search?${query}`
    );
    const data = await res.json();
    return data;
  },
});