반응형
1. react-helmet 설치 방법
중요: react-helmet은 더 이상 유지보수되지 않으며, react-helmet-async가 권장 대체 패키지입니다. 아래는 react-helmet 설치 방법이며, 실무에서는 react-helmet-async 사용을 강력히 권장합니다.
Yarn 사용 시:
yarn add react-helmet
npm 사용 시:
npm install react-helmet
- react-helmet의 역할을 이해합니다.
- React 애플리케이션에서 HTML <head> 태그를 동적으로 관리하는 방법을 배웁니다.
- title, meta, link 태그를 컴포넌트 내에서 설정해보는 실습을 합니다.
- <head> 태그의 동적 관리:
- React 애플리케이션은 SPA(Single Page Application)로, URL이 변경되어도 <head> 태그의 내용은 기본 HTML 파일에서 정의된 내용으로 고정됩니다.
- react-helmet을 사용하면 각 페이지(컴포넌트)에 따라 <head> 태그의 내용을 동적으로 변경할 수 있습니다.
- SEO 및 메타 정보: 검색 엔진 최적화(SEO)를 위해 title, description, keywords 등의 메타 태그를 동적으로 설정하는 것이 중요합니다.
- 사용 예시: 게시판 글 제목, 상품명, 브랜드명 등에 따라 <title>을 변경하거나, 각 페이지의 설명을 meta description으로 설정할 수 있습니다.
react-helmet 사용법
import { Helmet } from 'react-helmet';
function MyComponent() {
return (
<div>
<Helmet>
<title>My Custom Title</title>
<meta name="description" content="This is my custom page" />
<link rel="canonical" href="http://mysite.com/example" />
</Helmet>
<h1>My Component Content</h1>
</div>
);
}
- Helmet 컴포넌트 내부에 HTML <head> 태그에 들어갈 요소들을 작성하면, react-helmet이 자동으로 실제 HTML의 <head> 태그에 적용해줍니다.
// src/components/BasicHelmet.tsx
import React from 'react';
import { Helmet } from 'react-helmet';
const BasicHelmet: React.FC = () => {
return (
<div>
<Helmet>
<title>기본 헬멧 타이틀</title>
<meta name="description" content="기본 헬멧 예제입니다." />
<meta name="keywords" content="react, helmet, seo" />
</Helmet>
<h1>기본 헬멧 예제</h1>
<p>이 페이지는 기본 Helmet 설정을 보여줍니다.</p>
</div>
);
};
export default BasicHelmet;예제 2: 동적 타이틀과 메타 정보
// src/components/DynamicHelmet.tsx
import React from 'react';
import { Helmet } from 'react-helmet';
interface Props {
title: string;
description: string;
}
const DynamicHelmet: React.FC<Props> = ({ title, description }) => {
return (
<div>
<Helmet>
<title>{title}</title>
<meta name="description" content={description} />
</Helmet>
<h1>{title}</h1>
<p>{description}</p>
</div>
);
};
export default DynamicHelmet;
// src/App.tsx
import React from 'react';
import BasicHelmet from './components/BasicHelmet';
import DynamicHelmet from './components/DynamicHelmet';
function App() {
return (
<div className="App">
<Helmet>
<title>기본 앱 타이틀</title>
<meta name="description" content="이 앱의 기본 설명입니다." />
</Helmet>
<BasicHelmet />
<DynamicHelmet title="동적 타이틀" description="이것은 동적으로 변경된 설명입니다." />
</div>
);
}
export default App;반응형
'교육' 카테고리의 다른 글
| flushSync로 정밀한 렌더링 제어 (0) | 2025.11.19 |
|---|---|
| "destroy is not a function" 오류의 정체와 해결 전략 (0) | 2025.11.19 |
| 「React 18 + TypeScript + MobX 기반 구조에서 useStore 훅 설계와 스토어 계층 아키텍처 이해」 (0) | 2025.11.17 |
| "TypeScript 제네릭 기반 Form 재사용 패턴: React Hook Form과 함께하는 고급 Form 설계" (0) | 2025.11.17 |
| #007 React useMemo : 성능 최적화의 정석 (0) | 2025.11.13 |
