[NextJS] ContextAPI를 사용해 값 활용하기 #1

ContextAPI

-> Context API를 사용하면 프로젝트 안에서 전역적으로 사용 할 수 있는 값을 관리 할 수 있게 됩니다. 여기서 값은 이란 상태와는 다른 표현인데요. 값은 꼭 상태를 가르키지 않아도 됩니다. 이 값은 함수일수도 있고, 어떤 외부 라이브러리 인스턴스일수도 있고 DOM 일 수도 있습니다.

이 ContextAPI를 어떻게 사용할 수 있을까요?

먼저, Next의 예시를 통해 알아보고 React에서는 어떻게 사용할 수 있는지 나아가 Router를 사용할 때 ContextAPI는 어떻게 사용할 수 있을지를 알아보도록 하겠습니다.

_app.tsx

import React, { useState, createContext } from 'react

interface IGlobalContext {
  accessToken?: string;
  setAccessToken?: Dispatch<SetStateAction<string>>;
}

export const GlobalContext = createContext<IGlobalContext>({});

const [accessToken, setAccessToken] = useState("");
  const value = {
    accessToken,
    setAccessToken,
  };
  
  return (
    <GlobalContext.Provider value={value}>
      <ApolloProvider client={client}>
        <Component {...pageProps} />
      </ApolloProvider>
    </GlobalContext.Provider>
  );
}

우선, ContextAPI를 설정해주기 위해 createContext를 import합니다. 그리고 const GlobalContext = createContext({}) 를 설정해주시면 되는데 GlobalContext의 초기값을 {} 로 설정한 이유는 ContextAPI로 관리할 값이 많아질 수록 값을 관리하기가 수월하기 때문입니다.

초기 설정은 위에서 끝났고 다음은 값을 정해줄 차례입니다.

저는 user의 토큰을 관리하기 위해 accessToken을 예로 들어 설명하겠습니다.

useState를 통해 관리할 값을 설정해주고 그 값을 GlobalContext의 초기값과 type이 같도록 value라는 객체를 선언해 할당해줍니다.

그 후 _app의 return 문 안에서 할당한 값을 사용할 컴포넌트를 정하고 해당 컴포넌트를 감싸는

<GlobalContext.Provider value={value}> 
  < Component />
</GlobalContext.Provider>

설정해줍니다.

위 처럼 .Provider를 붙이고 뒤에 props로 value를 전달해 주게 되면 GlobalContext로 감싸진 컴포넌트 내에서 value값을 사용할 수 있게 됩니다. 즉, 전역적으로 값을 설정해 준 것이죠.

해당 컴포넌트에서 값을 사용하고 싶을 땐 어떻게 할까요?

import { GlobalContext } from "../_app";

export default function LoginPage() {
  const { accessToken, setAccessToken } = useContext(GlobalContext);

  return <div>{accessToken}</div>;
};

앞서 _app에서 export로 내보내준 GlobalContext값을 감싸준 컴포넌트 안에서 사용하고 싶은 곳에 import해줍니다.

그 이후 const { accessToken, setAccessToken } = useContext(GlobalContext); 처럼 값을 꺼내오기만 하면되는데요. 참 쉽죠?

단, 주의할 점은 Provider로 감싸준 컴포넌트들은 해당 value값이 변할 때마다 같이 렌더링되게 된다는 점입니다.