[React]-context로 instance 관리하기!

이전 포스트에서 youtube.js, fakeYoutube.js를 각각 만들어 Videos.jsx에서 그 때 그 때 필요한 instance를 만들어서 일일이 함수를 호출하는 방식으로 코드를 작성했다. 하지만 호출할 때마다 새로운 instance를 만드는 방식은 성능에 좋지 않다.

이를 개선하기 위해 context를 만들어서 instance를 관리하는 방식으로 리팩토링을 해보자!!

1. Context 만들기

src에 context라는 폴더를 만들고 그 안에 YoutubeApiContext.jsx 파일을 만든다!

그리고 Provider를 만든 후 value에 youtube instance를 저장한다.

// YoutubeApiContext.jsx

import { createContext, useContext } from "react";
import Youtube from "../api/youtube";
import FakeYoutube from "../api/fakeYoutube";

export const YoutubeApiContext = createContext();

const youtube = new FakeYoutube(); // new Youtube();

export function YoutubeApiProvider({ children }) {
  return (
    <YoutubeApiContext.Provider value={{ youtube }}>
      {children}
    </YoutubeApiContext.Provider>
  );
}

export function useYoutubeApi() {
  return useContext(YoutubeApiContext);
}

2. App.js 에서 우산으로 감싸주기!

YoutubeApiProvider를 import하고 YoutubeApiProvider로 children을 감싸준다!

// App.js

function App() {
  return (
    <>
      <SearchHeader />
      <YoutubeApiProvider>
        <QueryClientProvider client={queryClient}>
          <Outlet />
        </QueryClientProvider>
      </YoutubeApiProvider>
    </>
  );
}

3. useQuery로 return하기!

useYoutubeApi를 import 하고
useQuery에서 함수를 return한다!

// Videos.jsx

  const { youtube } = useYoutubeApi();
  const {
    isLoading,
    error,
    data: videos,
  } = useQuery(["videos", keyword], () => {
    return youtube.search(keyword);
  });

이렇게 context를 사용하면 instance를 생성하지 않아도 된다!