[TIL] React Helmet
TIL
React 라이브러리
react-helmet-async
설명
react-helmet과 유사한 라이브러리이다.
react-helmet
react-helmet은 컴포넌트 내에서 head 태그를 수정할 수 있게 합니다.
head 태그 내의 title이나 meta 태그 등을 수정하여 여러 기능을 구현할 수 있습니다.
- 각 컴포넌트마다 브라우저 문서 탭의 타이틀 변경 가능
- 소셜 공유 시 meta 태그 수정
- 검색 엔진 최적화
사용함으로써 위와 같은 이점을 얻을 수 있습니다.
react-helmet을 쓰지 않는 이유
그러나 react-helmet은 thread-safe(1) 하지 않은 react-side-effect에 의존한다는 단점을 가지고 있습니다.
따라서, 비동기 데이터 처리에 문제가 생길 수 있습니다.
* (1) 여러 스레드로부터 동시에 접근이 이루어져도 프로그램의 실행에 문제가 없음
react-helmet-async는 thread-safe하기 때문에 사용합니다.
사용 이유
SPA 프로젝트에 사용되는 라이브러리입니다.
body태그 내부의 태그 및 컴포넌트들을 미리 한꺼번에 수령하여 render할 수 있으나,
SSR이 아니기 때문에 head 태그 내부는 수정할 수 없기 때문에 이와 같은 라이브러리를 사용합니다.
위의 설명과 같이 title 태그를 수정하거나 meta 태그를 추가하고 싶을 때 사용한다.
사용법
가장 상위 컴포넌트를 HelmetProvider로 감쌉니다. (ApolloClient, ContextProvider 처럼)
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { HelmetProvider } from "react-helmet-async";
import App from "./App";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
<StrictMode>
<HelmetProvider>
<App />
</HelmetProvider>
</StrictMode>
);
이후 App 컴포넌트 내에서 Helmet 컴포넌트를 사용하여 head 태그를 수정할 수 있습니다.
import { Helmet } from "react-helmet-async";
import "./styles.css";
import InnerComponent from "./InnerComponent";
import { useState } from "react";
export default function App() {
const [shouldShowInner, setShouldShowInner] = useState(false);
return (
<div className="App">
<Helmet>
<title>인사말</title>
<link rel="canonical" href="https://www.tacobell.com/" />
</Helmet>
<h1>Hello World</h1>
<button onClick={() => setShouldShowInner((prev) => !prev)}>
{shouldShowInner ? "인사말" : "본론으"}로 가기
</button>
{shouldShowInner && <InnerComponent />}
</div>
);
}
컴포넌트 내부 Helmet은 안쪽의 컴포넌트부터 우선됩니다.
따라서 위와 같은 코드에서는 처음에는 인사말이지만
button을 클릭하여 본론 컴포넌트가 생기면,
InnerComponent에 있는 Helmet이 우선되어 title이 바뀌게 됩니다.
결과
회고 (TIL)
2022.04.14 Daily 회고
✏오늘 한 일
- 업무
- React 프로젝트 업무
- 지라 관리
- gitlab wiki 문서화
- react-helmet-async 라이브러리 스터디
⁉느낀 점
첫 MR(Merge Request)를 했다!
물론 css에 한 줄 추가한 것 밖에 없었지만..
MR도 해보고, git flow도 보고 template도 써보고, 지라 티켓도 관리할 겸 과제가 주어졌다.
이 와중에 css 한 줄만 추가하는 게 너무 아까워서 추가적인 수정을 했고, 리뷰 받고 MR에 포함시켰다.😂
아 오늘 깨달은 것이 아무리 개발 경력이 없다지만,
나름 제조업에서 겪었던 work flow라든지, 프로젝트 관리법(여기는 jira를 사용하지만 그전에는 MS teams를 사용했다)들이 있어서 그런지 업무 전반에 대한 이해도는 빨리 올라가는 느낌이다.
(아마 첫 직장이었다면 멘붕의 현장이었을 것)
또한, git을 좀 많이 만져보고 온 것이 너무 다행이라는 생각이 들었다.
나도 git을 쓰는 것이 당연해졌지만, git 사용법을 모른다면 나도 난감하고 선배도 난감했을 상황이 연출됐을 것 같다..
벌써부터 헤매일 조짐이 보인다.
내말은 할 것이 많아지면 뭐 부터 해야할지 정하는 것에서 헤맬 것 같다.
업무 우선순위 정하는 것 연습하자.
문서화만이 살 길 같다.
신입인 내가 프로젝트적으로 디벨롭을 시키는 것은 어려울 것이다.
대신 아직 문서화가 안되어 있는 부분이 보인다!
이 부분을 좀 잘 정리해서 이번 년도 끝났을 때는 나의 발자취가 많이 보일 수 있도록 노력하고 싶다.
🎃현재 나의 상태
몸 관리 잘 하자.
회사에서 정신 바짝차리고 할 거 열심히 하자. (아무리 편해졌다고 긴장 늦추지 않기/물론 아직 편하진 않지만)
댓글남기기