React/React에서 Recoil로 상태관리하기

Recoil을 사용한 React 상태 관리(4): 비동기 데이터 처리 (Selector의 비동기 처리)

atomicdev 2024. 10. 14. 15:36
728x90

비동기 데이터 처리 (Selector의 비동기 처리)

개요: 이번 강의에서는 Recoil의 Selector를 사용하여 비동기 데이터를 처리하는 방법을 배웁니다. 비동기 API 호출과 같은 데이터를 Selector로 관리하는 방식을 익히고, 이를 실제 컴포넌트에서 사용하는 방법을 실습합니다.

Selector의 비동기 처리

1. Selector를 사용한 비동기 데이터 관리

  • Recoil의 Selector는 파생된 상태를 관리하기 위한 도구입니다. 상태는 Selector를 통해 동기적으로 계산될 수도 있지만, 비동기 작업을 처리할 때는 async 함수를 사용하여 데이터를 가져올 수 있습니다.
  • 이를 통해, API 호출과 같은 비동기 작업을 처리하고, 해당 데이터를 Selector에서 관리할 수 있습니다.

2. 비동기 API 호출을 사용한 상태 관리

  • async 함수를 사용하여 API 호출을 처리하고, 해당 결과를 Selector로 반환할 수 있습니다.
  • API 데이터가 성공적으로 반환되면, 이를 컴포넌트에 쉽게 연결하여 화면에 표시할 수 있습니다.

실습: Selector에서 async 함수를 사용하여 비동기 데이터 가져오기

목표: API로부터 데이터를 호출하고, 그 데이터를 Selector에서 관리한 후 컴포넌트에서 표시하는 간단한 예제를 만들어 봅니다.

1. API 호출을 위한 Selector 만들기

import { selector } from 'recoil';

export const userDataSelector = selector({
  key: 'userDataSelector',
  get: async () => {
    const response = await fetch('https://jsonplaceholder.typicode.com/users/1');
    const data = await response.json();
    return data;
  },
});
 
  • userDataSelector라는 Selector를 만들고, API 호출을 통해 사용자 데이터를 가져옵니다.
  • 비동기 함수인 async를 사용하여 API 응답을 기다린 후, 데이터를 반환합니다.

2. 컴포넌트에서 비동기 데이터 가져오기

import React from 'react';
import { useRecoilValue } from 'recoil';
import { userDataSelector } from './selectors';

const UserProfile = () => {
  const userData = useRecoilValue(userDataSelector);  // Selector에서 데이터를 가져옴

  return (
    <div>
      <h1>User Profile</h1>
      {userData ? (
        <div>
          <p><strong>Name:</strong> {userData.name}</p>
          <p><strong>Email:</strong> {userData.email}</p>
          <p><strong>Phone:</strong> {userData.phone}</p>
        </div>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
};

export default UserProfile;
 
  • useRecoilValue를 사용하여 userDataSelector에서 데이터를 가져오고, 사용자 프로필 정보를 화면에 표시합니다.
  • 데이터를 로딩하는 동안 Loading... 메시지가 표시되며, API 데이터가 로드되면 사용자 정보를 출력합니다.

3. RecoilRoot로 감싸기

import React from 'react';
import { RecoilRoot } from 'recoil';
import UserProfile from './UserProfile';

function App() {
  return (
    <RecoilRoot>
      <UserProfile />
    </RecoilRoot>
  );
}

export default App;
 
  • RecoilRoot로 전체 애플리케이션을 감싸서 Recoil 상태를 사용할 수 있도록 설정합니다.

핵심 개념 요약:

  1. Selector의 비동기 처리: Recoil의 Selector는 비동기 작업을 처리할 수 있습니다.
  2. 비동기 API 호출: async 함수와 fetch를 사용하여 데이터를 가져오고, 이를 Recoil의 상태로 관리할 수 있습니다.
  3. 컴포넌트에 상태 연결: useRecoilValue를 사용하여 비동기 데이터를 컴포넌트에 연결하고, 해당 데이터를 화면에 표시할 수 있습니다.
728x90