일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- react
- nest.js forwardRef
- Testing-library/react
- 첫 코딩
- TodoList 테스트 코드
- 개발
- react jest
- nest.js 순환 종속성
- mock api 사용법
- 리액트 테스트 코드
- 비동기 테스트
- CSS
- 프로젝트 배포하기
- react native 무한스크롤
- 첫코딩
- react testing library 비동기 테스트 사용법
- HTML
- react 테스트
- jest
- 리액트 테스트
- React Testing Library
- React 테스트코드
- mock api를 이용한 react 테스트
- JavaScript
- FlatList 무한 스크롤
- ScrollView 무한 스크롤
- javascript 테스트
- nest.js 순환 참조
- nest.js circular Dependency
- TDD방식으로 리액트 테스팅
Archives
- Today
- Total
성장을 위한 기록
React(리액트)에서 meta 태그 사용하기 (helmet) 본문
MPA방식으로 HTML을 작성할 때 우리는 페이지별로 title과 meta태그 og를 작성했다.
하지만, react는 SPA방식으로 HTML이 하나만 존재한다. 그럼 우린 하나의 meta태그만 사용가능 한가? 당연히 아니다 !
다른 JS코드로 값을 변경하던지 우리는 react-helmet이라는 패키지를 이용 할 수 있다.
사용 방법
- 설치
yarn add react-helmet || npm install --save react-helmet
- 사용하기
방식으로 컴포넌트에 meta 태그를 작성할 수 있다. (사실 작성보다는 변경이라 생각하는게 맞는 것 같다.import {Helmet} from "react-helmet" <Helmet> <title>page one</title> <meta property="og:title" content="page one" /> <meta property="og:description" content="hi there :) page one" /> <meta property="og:image" content="%PUBLIC_URL%/logo192.png" /> </Helmet>
'FE (Front End) (구) > React' 카테고리의 다른 글
redux toolkit 파해쳐보기 기본 개념 정리 및 사용법 (0) | 2022.06.09 |
---|---|
React.memo vs useMemo vs useCallback 간단 정리 차이점 (0) | 2022.06.08 |
React (리액트) 커스텀 훅 사용하기 간단 예제 (0) | 2022.06.03 |
리액트(react) useState를 사용하는 이유, 주의 사항 (0) | 2022.05.30 |
리액트 기초 1탄 Props 전달 방법, JSX 규칙 (0) | 2022.05.30 |
Comments