React_66_react helmet으로 페이지 제목 설정하기

import { Helmet } from 'react-helmet';
import Button from '../components/Button';
import Container from '../components/Container';
import Lined from '../components/Lined';
import styles from './HomePage.module.css';
import landingImg from '../assets/landing.svg';

function HomePage() {
  return (
    <>
      <Helmet>
        <title>Codethat - 코딩이 처음이라면, 코드댓</title>
      </Helmet>
      <div className={styles.bg} />
      <Container className={styles.container}>
        <div className={styles.texts}>
          <h1 className={styles.heading}>
            <Lined>코딩이 처음이라면,</Lined>
            <br />
            <strong>코드댓</strong>
          </h1>
          <p className={styles.description}>
            11만 명이 넘는 비전공자, 코딩 입문자가 코드댓 무제한 멤버십을
            선택했어요.
            <br />
            지금 함께 시작해보실래요?
          </p>
          <div>
            <Button>지금 시작하기</Button>
          </div>
        </div>
        <div className={styles.figure}>
          <img src={landingImg} alt="그래프, 모니터, 윈도우, 자물쇠, 키보드" />
        </div>
      </Container>
    </>
  );
}

export default HomePage;

react-helmet 이라는 라이브러리를 사용하면
더 편리하게 리액트스러운 방법으로 제목을 바꿀 수 있는 방법이다.

예를 들면 위 코드처럼 Helmet 이라는 컴포넌트로 감싼 다음에,
안에다가 title 태그를 배치하면 이 컴포넌트가 렌더링 될 때

HTML의 title 태그를 덮어쓸 수 있습니다.
이름이 헬멧인 이유는 head 태그에 덮어쓰기 때문이다.