설치

$ npm i react-helmet-async

이 패키지는 React Helmet의 포크입니다. <Helmet> 사용법은 동일하지만 서버와 클라이언트는 이제 요청되는 state를 캡슐화하기 위해 <HelmetProvider>가 필요합니다.

즉, 이 패키지가 react-helmet과 다른 주요 방법은 Provider를 사용하여 React 트리의 Helmet 상태를 캡슐화해야 한다는 것입니다.

import { Helmet, HelmetProvider } from 'react-helmet-async';

function Coin() {
	const { state } = useLocation<{ name: string }>();
	
	// 비동기 호출
  const { isLoading: infoLoading, data: infoData } = useQuery<IInfoData>(
    ['info', coinId], () => fetchCoinInfo(coinId)
  );
	// 비동기 호출  
  const { isLoading: tickersLoading, data: tickersData } = useQuery<IPriceData>(
    ['tickers', coinId], () => fetchCoinTicker(coinId), {
      refetchInterval: 5000
    }
  );

  const loading = infoLoading || tickersLoading;
  // infoLoading이 true 이면 infoLoading, false 이면 tickersLoading
  // 즉 여기에서는 두 개의 api를 전부 받아올 때 까지 loading은 true 이다.

  return (
		<HelmetProvider> {/* -> 꼭 선언해 주어야 한다. */}
	    <Container>
	      <Helmet>
	        <title>
						{/* 비동기 출력 */}
	          {state?.name ? state.name : loading ? "Loading..." : infoData?.name}
	        </title>
	      </Helmet>
	      <Header>
	        <Title>
						{/* 비동기 출력 */}
	          {state?.name ? state.name : loading ? "Loading..." : infoData?.name}
					</Title>
	      </Header>
	    </Container>
		</HelmetProvider>
  );
}

export default Coin;