useContext in navigation bar

useContext 를 사용하여 네비게이션 바에 계정 정보를 노출 시키자 !
나는 next.js 에서 적용했는데, 리액트도 같은 방법으로 적용할 수 있을것 이다.

// src/context/account.tsx


interface AccountProps {
  name: string;
  email: string;
}

const AccountContext = createContext<AccountProps|null>(null);

export const useAccount = () => {
  return useContext(AccountContext);
}

export const AccountProvider = ({children}: { children: ReactNode }) => {
  const [account, setAccount] = useState<AccountProps|null>(null);

  useEffect(() => {
    const init = async () => {
      if (account == null) {
        const res = await getAccount();
        if (res.success) {
          setAccount(res.data);
        }
      }
    }
    init();
  },[])
  return (
      <AccountContext.Provider value={{ account, setAccount }}>
        {children}
      </AccountContext.Provider>
  )
}

context와 provider를 생성했다.

계정 정보가 없을 시 api를 호출한다.

// pages/_app.tsx

import type { AppProps } from "next/app";
import {AccountProvider} from "@context/account";

function MyApp({ Component, pageProps }: AppProps) {
  return (
      <AccountProvider>
        <Component {...pageProps}></Component>
      </AccountProvider>
  );
}
export default MyApp;

최상위인 _app.tsx에 account provider 를 주입? 한다.

이제 하위 컴포넌트 들에서 account 정보에 접근 할 수 있다.

// src/component/navbar.tsx

export const Navbar = () => {
  const {account} = useAccount();

  return (
    <>
       <p>{account.name}</p>
       <p>{account.email}</p>
    </>
  )
    ...
}

이렇게 useContext 를 return 하는 useAccount를 통하여 account 값을 가져올 수 있다.