4.3 Recoil 비동기 처리

4.3.1 비동기 처리의 개념와 중요성

4.3.2 Recoil을 통한 비동기 처리

import React, { useState, useEffect } from "react";

function App() {
    const [imageData, setImageData] = useState(null);

    useEffect(() => {
        const fetchCatImage = async () => {
            const url = "<https://api.thecatapi.com/v1/images/search?limit=1>";
            const api_key = "DEMO_API_KEY";

            try {
                const response = await fetch(url, {
                    headers: {
                        "x-api-key": api_key,
                    },
                });
                const data = await response.json();
                const firstImageData = data[0];
                setImageData(firstImageData);
            } catch (error) {
                console.log(error);
            }
        };

        fetchCatImage();
    }, []);

    return (
        <>
            <h1>귀여운 고양이 이미지</h1>
            <div>
                {imageData && (
                    <img
                        src={imageData.url}
                        style={{ width: 400, height: 300 }}
                        alt="Cat"
                    />
                )}
            </div>
        </>
    );
}

export default App;

1) Recoil의 Selector와 React의 Suspense를 통한 비동기 데이터 처리

// selector/catImageState.js
import { selector } from "recoil";

// Recoil Selector를 정의합니다.
export const catImageState = selector({
    key: "catImageState", // 고유한 키로 식별합니다.
    get: async ({ get }) => {
        const url = "<https://api.thecatapi.com/v1/images/search?limit=1>";
        const api_key = "DEMO_API_KEY";

        try {
            // 고양이 이미지 데이터를 비동기로 가져옵니다.
            const response = await fetch(url, {
                headers: {
                    "x-api-key": api_key,
                },
            });
            const data = await response.json();
            return data[0];
        } catch (error) {
            throw error; // 에러 발생 시 예외 처리
        }
    },
});

import React, { Suspense } from "react";
import { useRecoilValue } from "recoil";
import { catImageState } from "./selector/catImageState";

function CatImage() {
		// useRecoilValue로 Selector에서 비동기 데이터를 가져옵니다.
    const imageData = useRecoilValue(catImageState);

    return (
        <img
            src={imageData.url}
            style={{ width: 400, height: 300 }}
            alt="고양이"
        />
    );
}

function App() {
    return (
        <>
            <h1>귀여운 고양이 이미지</h1>
            <div>
                <Suspense fallback={<p>로딩 중...</p>}>
                    <CatImage /> {/* CatImage 컴포넌트를 Suspense로 감싸 로딩 중일 때 대체 내용을 표시합니다. */}
                </Suspense>
            </div>
        </>
    );
}

export default App;

import React from "react";
import ReactDOM from "react-dom/client";
import { RecoilRoot } from "recoil"; // Import RecoilRoot

import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
    <RecoilRoot>
        <App />
    </RecoilRoot>
);

2) Recoil의 Selector와 useRecoilValueLoadable을 통한 비동기 데이터 처리

• hasValue

• loading

• hasError

import React, { Suspense } from "react";
import { useRecoilValueLoadable } from "recoil";
import { catImageState } from "./selector/catImageState";

function CatImage() {
    // useRecoilValueLoadable을 사용하여 catImageState Recoil 상태의 로딩 상태를 확인합니다.
    const catImageLoadable = useRecoilValueLoadable(catImageState);

    if (catImageLoadable.state === "hasValue") {
        // 상태가 'hasValue'인 경우, 데이터가 성공적으로 로드된 것입니다.
        const imageData = catImageLoadable.contents; // 데이터를 추출합니다.
        return (
            <img
                src={imageData.url}
                style={{ width: 400, height: 300 }}
                alt="고양이"
            />
        );
    } else if (catImageLoadable.state === "loading") {
        // 상태가 'loading'인 경우, 데이터가 아직 로드 중입니다.
        return <p>로딩 중...</p>;
    } else {
        // 그 외의 경우, 데이터 로딩 중에 오류가 발생했습니다.
        return <p>고양이 이미지를 불러오는 중 에러가 발생했습니다.</p>;
    }
}

function App() {
    return (
        <>
            <h1>귀여운 고양이 이미지</h1>
            <div>
                <Suspense fallback={<p>로딩 중...</p>}>
                    {/* Suspense 컴포넌트를 사용하여 CatImage 컴포넌트를 렌더링하고, 데이터 로딩 중에 로딩 상태를 처리합니다. */}
                    <CatImage />
                </Suspense>
            </div>
        </>
    );
}

export default App;

3) Recoil의 Atom Effects를 사용한 비동기 데이터 처리

//atom.js
export const catImageState = atom({
  key: 'catImageState',
  default: null,
});

// 비동기 데이터를 가져오는 함수
const fetchCatImageAsync = async () => {
    const url = '<https://api.thecatapi.com/v1/images/search?limit=1>';
    const api_key = 'DEMO_API_KEY';
  
    try {
      const response = await fetch(url, {
        headers: {
          'x-api-key': api_key,
        },
      });
      const data = await response.json();
      const firstImageData = data[0];
      return firstImageData.url;
    } catch (error) {
      throw error;
    }
  };

// Atom과 Atom Effect 정의
import { atom } from 'recoil';

export const catImageState = atom({
  key: 'catImageState',
  default: null,
  effects_UNSTABLE: [
    ({ onSet }) => {
      // Atom이 읽힐 때(fetch) 비동기 작업 수행
      fetchCatImageAsync().then(url => {
        // 비동기 작업 완료 후 Atom 상태 변경
        onSet(url);
      });
    },
  ],
});

4.3.3 비동기 Selector와 Atom Effects의 차이점

4.3.4 마무리