반응 헬메트의 목적은 무엇입니까?
서버측 리액트 앱을 작성했습니다.여기서 html을 반환할 수 있는 것은 다음과 같습니다.
const html = renderToString(<App />);
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>A Cool Page</title>
<link rel="stylesheet" href="${ROOT}/static/index.css">
</head>
<body>
<div id="root">${html}</div>
<script src="${ROOT}/client-bundle.js"></script>
</body>
</html>
많은 분들이 쓰셨다고 들었어요.react-helmet머릿속에서 콘텐츠를 관리합니다.위와 같이 직접 포함하면 어떤 장점이 있는지 궁금합니다.
react-helmet의 주요 이점은 트리에 여러 개의 컴포넌트가 있는 경우입니다.<head>태그가 있으면<meta>동일한 속성/값을 가진 태그.
예를 들어 인덱스 페이지 구성 요소에 다음이 있는 경우:
const html = renderToString(<App />);
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="This is the index page description">
<title>A Cool Index Page</title>
</head>
</html>
그러나 리프 페이지 컴포넌트에는<head>메타 태그를 포함하는 태그:
<html>
<head>
<meta name="description" name="This is the unique leaf page description">
<title>A Cool Leaf Page</title>
<link rel="stylesheet" href="${ROOT}/static/index.css">
</head>
</html>
두 페이지 구성 요소 사이에 동일한 속성 값을 가진 두 개의 메타 태그가 있습니다.name="description"우리 나무에서.중복으로 이어질 수 있다고 생각하겠지만react-helmet이 문제를 해결합니다.
리액트 헬메트는 리프 페이지에 도달한 경우 인덱스/사이트 레벨 설명 메타 태그를 덮어쓰고 하위 레벨(리프 페이지 전용)을 렌더링합니다.
덮어쓸 필요가 없었기 때문에 뷰포트 메타 태그도 포함됩니다.
때문에.react-helmet, 리프 페이지에서는<head>는 다음과 같이 표시됩니다.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" name="This is the unique leaf page description">
<title>A Cool Leaf Page</title>
<link rel="stylesheet" href="${ROOT}/static/index.css">
</head>
</html>
react-module을 사용하면 검색 엔진 및 소셜 미디어 크롤러가 읽을 메타 태그를 설정할 수 있습니다.이를 통해 서버 측 렌더링과 React Helmet은 SEO 및 소셜 미디어 친화적인 앱을 만들 수 있는 다이내믹 듀오입니다.
예:
import { Helmet } from 'react-helmet';
<Helmet>
<title>Turbo Todo</title>
<meta name="description" content="test on react-helmet" />
<meta name="theme-color" content="#ccc" />
</Helmet>
두 가지 방법 모두 효과가 있습니다.하지만 리액트 헬멧의 경우, 헤드는 구성 요소로 취급되며 더 리액트 유사합니다.또한 드물지만 동적 헤드를 구현하기 위해 메타 데이터로 일부 소품이나 상태를 바인딩할 수 있습니다.한 가지 시나리오는 다른 언어 간에 전환하는 것입니다.
또한 Respect Helmet을 사용하면 렌더링 함수의 범위를 벗어나는 클래스를 수정할 수 있습니다.
예를 들어 다음과 같은 경우<body>다음 작업을 수행할 수 있습니다.
<Helmet>
<body className="dynamic-class-for-body-on-this-view" />
</Helmet>
React Helmet은 문서 헤드에 대한 모든 변경사항을 관리하는 재사용 가능한 React 구성요소입니다.
예를 들어 SEO에 따라 각 페이지의 제목과 메타 설명을 변경하는 경우 다음을 수행할 수 있습니다.
<Helmet>
<title>Your Title</title>
<meta name="description" content="Description of your page" />
</Helmet>
언급URL : https://stackoverflow.com/questions/52690820/what-is-the-purpose-of-react-helmet
'sourcetip' 카테고리의 다른 글
| 뷰 폴더 밖에서 라라벨 블레이드를 사용할 수 있습니까? (0) | 2023.04.03 |
|---|---|
| wordpress 플러그인의 다른 페이지로 양식을 제출하는 방법 (0) | 2023.04.03 |
| 상태 변경 시 반응 구성 요소가 다시 렌더링되지 않음 (0) | 2023.04.03 |
| 커스텀 속성별로 WooCommerce 제품을 필터링하는 방법 (0) | 2023.04.03 |
| django-rest-display 3.0은 네스트된 시리얼라이저로 작성 또는 갱신합니다. (0) | 2023.04.03 |