원문: https://react.dev/reference/react-dom/components/title
컴포넌트</h1>
<p>내장 브라우저 <code><title></code> 컴포넌트는 문서의 제목(title)을 지정할 수 있게 해줍니다.</p>
<pre><code class="language-html"><title>My Blog</title></code></pre>
<ul>
<li>레퍼런스<ul>
<li><title></li>
</ul>
</li>
<li>사용법<ul>
<li>문서 제목 설정하기</li>
<li>변수로 제목 지정하기</li>
</ul>
</li>
</ul>
<hr>
<h2>레퍼런스</h2>
<h3><code><title></code></h3>
<p>문서의 제목을 지정하려면 내장 브라우저 <code><title></code> 컴포넌트를 렌더링하세요. 어떤 컴포넌트에서든 <code><title></code>을 렌더링할 수 있으며, React는 항상 해당 DOM 요소를 문서의 <code><head></code>에 배치합니다.</p>
<pre><code class="language-html"><title>My Blog</title></code></pre>
<p>아래 예시를 참고하세요.</p>
<h4>Props</h4>
<p><code><title></code>는 모든 공통 요소 속성을 지원합니다.</p>
<ul>
<li><code>children</code>: <code><title></code>은 자식으로 오직 텍스트만 허용합니다. 이 텍스트가 문서의 제목이 됩니다. (컴포넌트로 전달해도, 해당 컴포넌트가 텍스트만 렌더링한다면 허용됩니다.)</li>
</ul>
<h4>특별한 렌더링 동작</h4>
<p>React는 <code><title></code> 컴포넌트에 해당하는 DOM 요소를 React 트리의 어디에 렌더링하든 항상 문서의 <code><head></code>에 배치합니다. <code><head></code>는 DOM 내에서 <code><title></code>이 위치할 수 있는 유일한 위치이지만, 특정 페이지를 나타내는 컴포넌트가 <code><title></code>을 자체적으로 렌더링할 수 있다면 편리하고 구성이 용이합니다.</p>
<p>예외:</p>
<ul>
<li><code><title></code>이 <code><svg></code> 컴포넌트 내부에 있으면 특별 동작이 없습니다. 이 경우 문서의 제목이 아니라 SVG 그래픽의 접근성 주석으로 사용됩니다.</li>
<li><code><title></code>에 <code>itemProp</code> prop이 있으면 특별 동작이 없습니다. 이 경우 문서의 제목이 아니라 특정 부분의 메타데이터로 취급합니다.</li>
</ul>
<h5>주의사항</h5>
<p>한 번에 하나의 <code><title></code>만 렌더링하세요. 여러 컴포넌트가 동시에 <code><title></code> 태그를 렌더링하면 React는 모든 제목을 문서 head에 배치합니다. 이 경우 브라우저와 검색 엔진의 동작은 정의되어 있지 않습니다.</p>
<hr>
<h2>사용법</h2>
<h3>문서 제목 설정하기</h3>
<p>어떤 컴포넌트에서든 자식으로 텍스트를 전달하여 <code><title></code> 컴포넌트를 렌더링하세요. React는 <code><title></code> DOM 노드를 문서 <code><head></code>에 배치합니다.</p>
<pre><code class="language-javascript">import ShowRenderedHTML from './ShowRenderedHTML.js';
export default function ContactUsPage() {
return (
<ShowRenderedHTML>
<title>My Site: Contact Us</title>
<h1>Contact Us</h1>
<p>Email us at support@example.com</p>
</ShowRenderedHTML>
);
}</code></pre>
<h3>변수로 제목 지정하기</h3>
<p><code><title></code>의 children은 반드시 하나의 문자열이어야 합니다. (또는 하나의 숫자, 또는 toString 메서드를 가진 객체)</p>
<p>아래와 같이 JSX 중괄호를 사용하면:</p>
<pre><code class="language-javascript"><title>Results page {pageNumber}</title> // 🔴 문제: 이 경우 children이 두 개의 배열이 됨</code></pre>
<p>이렇게 하면 children이 문자열 "Results page"와 pageNumber 값, 두 개의 배열이 되어 오류가 발생합니다. 대신 문자열 보간법을 사용해 하나의 문자열로 전달하세요:</p>
<pre><code class="language-javascript"><title>{`Results page ${pageNumber}`}</title></code></pre>
<hr>
<blockquote data-ke-style="style1"><p data-ke-size="size16"><span style="font-family: 'Noto Serif KR';"><p>출처: <a href="https://react.dev/reference/react-dom/components/title">https://react.dev/reference/react-dom/components/title</a> </p>
</span></p></blockquote></div>
<!-- System - START -->
<div class="revenue_unit_wrap">
<div class="revenue_unit_item adsense responsive">
<div class="revenue_unit_info">반응형</div>
<script src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" async="async"></script>
<ins class="adsbygoogle" style="display: block;" data-ad-host="ca-host-pub-9691043933427338" data-ad-client="ca-pub-3145895421510547" data-ad-format="auto"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>
</div>
<!-- System - END -->
<div class="container_postbtn #post_button_group">
<div class="postbtn_like"><script>window.ReactionButtonType = 'reaction';
window.ReactionApiUrl = '//rudaks.tistory.com/reaction';
window.ReactionReqBody = {
entryId: 730
}</script>
<div class="wrap_btn" id="reaction-730" data-tistory-react-app="Reaction"></div><div class="wrap_btn wrap_btn_share"><button type="button" class="btn_post sns_btn btn_share" aria-expanded="false" data-thumbnail-url="https://t1.daumcdn.net/tistory_admin/static/images/openGraph/opengraph.png" data-title="[react 번역] <title> 컴포넌트" data-description="원문: https://react.dev/reference/react-dom/components/title 컴포넌트내장 브라우저 컴포넌트는 문서의 제목(title)을 지정할 수 있게 해줍니다.My Blog레퍼런스사용법문서 제목 설정하기변수로 제목 지정하기레퍼런스문서의 제목을 지정하려면 내장 브라우저 컴포넌트를 렌더링하세요. 어떤 컴포넌트에서든 을 렌더링할 수 있으며, React는 항상 해당 DOM 요소를 문서의 에 배치합니다.My Blog아래 예시를 참고하세요.Props는 모든 공통 요소 속성을 지원합니다.children: 은 자식으로 오직 텍스트만 허용합니다. 이 텍스트가 문서의 제목이 됩니다. (컴포넌트로 전달해도, 해당 컴포넌트가 텍스트만 렌더링한다면 허용됩니다.)특별한 렌더링 동작React는 .." data-profile-image="https://tistory1.daumcdn.net/tistory/70948/attach/6b8a3944aff048bca13b008a22fa8c73" data-profile-name="루닥스" data-pc-url="https://rudaks.tistory.com/entry/react-%EB%B2%88%EC%97%AD-title-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8" data-relative-pc-url="/entry/react-%EB%B2%88%EC%97%AD-title-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8" data-blog-title="[루닥스 블로그] 연습만이 살길이다"><span class="ico_postbtn ico_share">공유하기</span></button>
<div class="layer_post" id="tistorySnsLayer"></div>
</div><div class="wrap_btn wrap_btn_etc" data-entry-id="730" data-entry-visibility="public" data-category-visibility="public"><button type="button" class="btn_post btn_etc2" aria-expanded="false"><span class="ico_postbtn ico_etc">게시글 관리</span></button>
<div class="layer_post" id="tistoryEtcLayer"></div>
</div></div>
<button type="button" class="btn_menu_toolbar btn_subscription #subscribe" data-blog-id="70948" data-url="https://rudaks.tistory.com/entry/react-%EB%B2%88%EC%97%AD-title-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8" data-device="web_pc" data-tiara-action-name="구독 버튼_클릭"><em class="txt_state"></em><strong class="txt_tool_id">[루닥스 블로그] 연습만이 살길이다</strong><span class="img_common_tistory ico_check_type1"></span></button><div class="postbtn_ccl" data-ccl-type="2" data-ccl-derive="1">
<a href="https://creativecommons.org/licenses/by/4.0/deed.ko" target="_blank" class="link_ccl" rel="license">
<span class="bundle_ccl">
<span class="ico_postbtn ico_ccl1">저작자표시</span>
</span>
<span class="screen_out">(새창열림)</span>
</a>
</div>
<!--
<rdf:RDF xmlns="https://web.resource.org/cc/" xmlns:dc="https://purl.org/dc/elements/1.1/" xmlns:rdf="https://www.w3.org/1999/02/22-rdf-syntax-ns#">
<Work rdf:about="">
<license rdf:resource="https://creativecommons.org/licenses/by/4.0/deed.ko" />
</Work>
<License rdf:about="https://creativecommons.org/licenses/by/4.0/deed.ko">
<permits rdf:resource="https://web.resource.org/cc/Reproduction"/>
<permits rdf:resource="https://web.resource.org/cc/Distribution"/>
<requires rdf:resource="https://web.resource.org/cc/Notice"/>
<requires rdf:resource="https://web.resource.org/cc/Attribution"/>
<permits rdf:resource="https://web.resource.org/cc/DerivativeWorks"/>
</License>
</rdf:RDF>
--> <div data-tistory-react-app="SupportButton"></div>
</div>
<!-- coupang 광고 시작 -->
<iframe src="https://ads-partners.coupang.com/widgets.html?id=872587&template=carousel&trackingCode=AF1751495&subId=&width=680&height=140&tsource=" width="680" height="140" frameborder="0" scrolling="no" referrerpolicy="unsafe-url" browsingtopics></iframe>
<!-- coupang 광고 끝 -->
<!-- SNS 공유 버튼 -->
<div class="sns-go">
<ul>
<li><a href="#" onclick="javascript:window.open('http://share.naver.com/web/shareView.nhn?url=' +encodeURIComponent(document.URL)+'&title='+encodeURIComponent(document.title), 'naversharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" alt="Share on Naver"><img src="https://tistory1.daumcdn.net/tistory/70948/skin/images/sns_naver.png" width="40" alt="네이버 블로그 공유"></a></li>
<li><a href="#" onclick="javascript:window.open('http://band.us/plugin/share?body='+encodeURIComponent(document.title)+encodeURIComponent('\r\n')+encodeURIComponent(document.URL)+'&route='+encodeURIComponent(document.URL), 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');return false;" target="_blank" alt="네이버 밴드 공유하기"><img src="https://tistory1.daumcdn.net/tistory/70948/skin/images/naverband.png" width="40px" alt='네이버 밴드 공유'></a></li>
<li><a href="#" onclick="javascript:window.open('https://www.facebook.com/sharer/sharer.php?u=' +encodeURIComponent(document.URL)+'&t='+encodeURIComponent(document.title), 'facebooksharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=300,width=600');return false;" target="_blank" alt="Share on Facebook"><img src="https://tistory1.daumcdn.net/tistory/70948/skin/images/sns_face.png" width="40" alt="페이스북 공유"></a></li>
<li><a href="#" onclick="javascript:window.open('https://story.kakao.com/s/share?url=' +encodeURIComponent(document.URL), 'kakaostorysharedialog', 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes, height=400,width=600');return false;" target="_blank" alt="Share on kakaostory"><img src="https://tistory1.daumcdn.net/tistory/70948/skin/images/sns_kakao.png" width="40" alt="카카오스토리 공유"></a></li>
</ul>
</div>
</div>
<div class="area_related_wrap">
<strong class="tit_related">번역 자료 관련 글</strong>
<ul class="list_related">
<li class="text_type list_item">
<a href="/entry/react-%EB%B2%88%EC%97%AD-flushSync-API?category=1213207" target="_blank" class="area_thumb">
</a>
<a href="/entry/react-%EB%B2%88%EC%97%AD-flushSync-API?category=1213207" target="_blank" class="area_info">
<strong class="title">[react 번역] flushSync API</strong>
<div class="list_date"><span>2025.05.27</span></div>
</a>
</li>
<li class="text_type list_item">
<a href="/entry/react-%EB%B2%88%EC%97%AD-createPortal-API?category=1213207" target="_blank" class="area_thumb">
</a>
<a href="/entry/react-%EB%B2%88%EC%97%AD-createPortal-API?category=1213207" target="_blank" class="area_info">
<strong class="title">[react 번역] createPortal API</strong>
<div class="list_date"><span>2025.05.27</span></div>
</a>
</li>
<li class="text_type list_item">
<a href="/entry/react-%EB%B2%88%EC%97%AD-style-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8?category=1213207" target="_blank" class="area_thumb">
</a>
<a href="/entry/react-%EB%B2%88%EC%97%AD-style-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8?category=1213207" target="_blank" class="area_info">
<strong class="title">[react 번역] <style> 컴포넌트</strong>
<div class="list_date"><span>2025.05.27</span></div>
</a>
</li>
<li class="text_type list_item">
<a href="/entry/react-%EB%B2%88%EC%97%AD-script-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8?category=1213207" target="_blank" class="area_thumb">
</a>
<a href="/entry/react-%EB%B2%88%EC%97%AD-script-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8?category=1213207" target="_blank" class="area_info">
<strong class="title">[react 번역] <script> 컴포넌트</strong>
<div class="list_date"><span>2025.05.27</span></div>
</a>
</li>
</ul>
<div class="area_btn_more_wrap">
<a href="/category/%EB%B2%88%EC%97%AD%20%EC%9E%90%EB%A3%8C" class="link_more">글 더보기</a>
</div>
</div>
<div class="post-reply">
<div class="action-trail">
<a href="#rp" onclick="" class="toggle-rp ie-nanum">
<i class="far fa-comment-alt"></i>
</a>
</div>
<div data-tistory-react-app="Namecard"></div>
</div>
</div>
</section>
<aside id="sidebar">
<div class="revenue_unit_wrap">
<div class="revenue_unit_item adsense responsive">
<div class="revenue_unit_info">반응형</div>
<script src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" async="async"></script>
<ins class="adsbygoogle" style="display: block;" data-ad-host="ca-host-pub-9691043933427338" data-ad-client="ca-pub-3145895421510547" data-ad-format="auto"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</div>
</div>
<!-- 검색 영역 -->
<form id="search-form" autocomplete="off" role="form">
<div class="search-bar">
<i class="icon fa fa-search"></i>
<input class="input-text" type="text" name="search" value="" id="search-input" class="ie-nanum" onkeypress="if (event.keyCode == 13) { try {
window.location.href = '/search' + '/' + looseURIEncode(document.getElementsByName('search')[0].value);
document.getElementsByName('search')[0].value = '';
return false;
} catch (e) {} }" placeholder="검색어 입력 후 엔터를 누르세요.">
</div>
</form>
<!-- 카운터 -->
<div class="module module-visitor">
<h3 class="module-title"><i class="fas fa-globe-europe fa-sm"></i><span>전체 방문자</span></h3>
<div class="module-content visitor">
<div class="visitor-row">
<span class="visitor-cell">오늘</span>
<span class="ff-h today visitor-date"></span>
</div>
<div class="visitor-row">
<span class="visitor-cell">어제</span>
<span class="ff-h yesterday visitor-date"></span>
</div>
<div class="visitor-row">
<span class="visitor-cell">전체</span>
<span class="ff-h total visitor-date"></span>
</div>
</div>
</div>
<!-- 카테고리 -->
<div class="module module-category" id="sidebar-category">
<h3 class="module-title"><span>전체 카테고리</span></h3>
<div class="module-content tt-cate"><ul class="tt_category"><li class=""><a href="/category" class="link_tit"> 분류 전체보기 <span class="c_cnt">(722)</span> </a>
<ul class="category_list"><li class=""><a href="/category/%EB%8F%84%EC%84%9C%20%EC%9A%94%EC%95%BD" class="link_item"> 도서 요약 <span class="c_cnt">(114)</span> </a></li>
<li class=""><a href="/category/%EC%86%8C%ED%94%84%ED%8A%B8%EC%9B%A8%EC%96%B4%20%EC%95%84%ED%82%A4%ED%85%8D%EC%B2%98%20%ED%8C%A8%ED%84%B4" class="link_item"> 소프트웨어 아키텍처 패턴 <span class="c_cnt">(21)</span> </a></li>
<li class=""><a href="/category/java" class="link_item"> java <span class="c_cnt">(25)</span> </a></li>
<li class=""><a href="/category/spring" class="link_item"> spring <span class="c_cnt">(48)</span> </a></li>
<li class=""><a href="/category/elasticsearch" class="link_item"> elasticsearch <span class="c_cnt">(17)</span> </a></li>
<li class=""><a href="/category/kafka" class="link_item"> kafka <span class="c_cnt">(6)</span> </a></li>
<li class=""><a href="/category/%EA%B0%9C%EB%B0%9C%EB%8F%84%EA%B5%AC%28Intellij%2C%20vscode%20%EB%93%B1%29" class="link_item"> 개발도구(Intellij, vscode 등) <span class="c_cnt">(14)</span> </a></li>
<li class=""><a href="/category/maven" class="link_item"> maven <span class="c_cnt">(8)</span> </a></li>
<li class=""><a href="/category/front-end" class="link_item"> front-end <span class="c_cnt">(35)</span> </a></li>
<li class=""><a href="/category/python" class="link_item"> python <span class="c_cnt">(41)</span> </a></li>
<li class=""><a href="/category/langchain" class="link_item"> langchain <span class="c_cnt">(56)</span> </a></li>
<li class=""><a href="/category/langgraph" class="link_item"> langgraph <span class="c_cnt">(81)</span> </a></li>
<li class=""><a href="/category/LLM%2C%20AI%20%EB%8F%84%EA%B5%AC" class="link_item"> LLM, AI 도구 <span class="c_cnt">(6)</span> </a></li>
<li class=""><a href="/category/AI%20%EC%A7%80%EC%8B%9D" class="link_item"> AI 지식 <span class="c_cnt">(40)</span> </a></li>
<li class=""><a href="/category/%EB%B2%88%EC%97%AD%20%EC%9E%90%EB%A3%8C" class="link_item"> 번역 자료 <span class="c_cnt">(185)</span> </a></li>
<li class=""><a href="/category/database" class="link_item"> database <span class="c_cnt">(4)</span> </a></li>
<li class=""><a href="/category/chrome%20extension" class="link_item"> chrome extension <span class="c_cnt">(3)</span> </a></li>
<li class=""><a href="/category/%ED%8C%8C%EC%9B%8C%ED%8F%AC%EC%9D%B8%ED%8A%B8%2C%ED%82%A4%EB%85%B8%ED%8A%B8" class="link_item"> 파워포인트,키노트 <span class="c_cnt">(2)</span> </a></li>
<li class=""><a href="/category/%EC%97%AC%EB%9F%AC%EA%B0%80%EC%A7%80" class="link_item"> 여러가지 <span class="c_cnt">(15)</span> </a></li>
</ul>
</li>
</ul>
</div>
</div>
<!-- 최신 글, 댓글 탭형 -->
<div class="module module-recents">
<div class="module-content">
<ul id="recent-tab" class="nav-recent" role="tablist">
<li class="active" id="#tab-rpost"><a class="btn-rpost" href="javascript:void(0);" data-toggle="tab" role="tab">최근 글</a></li>
<li id="#tab-rcomment"><a class="btn-rcomment" href="javascript:void(0);" data-toggle="tab" role="tab">최근 댓글</a></li>
</ul>
<div class="tab-content">
<!-- #tab-rpost -->
<div id="tab-rpost" class="tab-pane active fade in">
<!-- 최근 글 -->
<section class="rpost">
<h4 class="sr-only">최근 글</h4>
<ul class="list-unstyled">
</ul>
</section>
</div>
<!-- #tab-rcomment -->
<div id="tab-rcomment" class="tab-pane fade">
<!-- 최근 댓글 -->
<section class="rcomment">
<h4 class="nospace sr-only">최근댓글</h4>
<ul class="list-unstyled">
</ul>
</section>
</div>
</div>
</div>
</div>
<!-- 이 블로그 인기글 -->
<div class="module popularPost">
<h3 class="module-title"><i class="fas fa-fire-alt fa-sm"></i><span>블로그 인기글</span></h3>
</div>
</aside>
</div><!--content-End-->
</div>
</div>
<footer id="footer">
<span class="fleft">
<a href="https://privatenote.tistory.com">Powered by Privatenote</a>
</span> Copyright © <a href="https://rudaks.tistory.com/">[루닥스 블로그] 연습만이 살길이다</a> All rights reserved.
<!---->
<span class="sr-only">TistoryWhaleSkin3.4</span>
</footer>
</div>
<script>
/* 메뉴 */
(function($) {
function commonControl(){
var sc = $("#sidebar .c_cnt");
sc.length > 0 && sc.each(function() {
$(this).html($(this).html().replace(/[()]/g, ""))
});
$(document).on('click', '.btn_topMenu', function(){
if ($(".dropdown-content").hasClass("dropdown-content-toggle")){
$(".dropdown-content").removeClass("dropdown-content-toggle");
}else{
$(".dropdown-content").addClass("dropdown-content-toggle");
}
});
$(document).on('click', '.btn_close' ,function(){
$(".dropdown-content").removeClass("dropdown-content-toggle");
});
/* 사이드바 탭 분류 */
$(document).on('click', '#recent-tab li',function(){
$("#recent-tab > li").removeClass("active");
$(this).addClass("active");
$(".tab-content .tab-pane").removeClass("active");
$($(this).attr("id")).addClass("active");
});
/* 복사 방지, 개발자 도구 방지 */
$(document).keydown(function(event) {
if (event.keyCode == 123) { // Prevent F12
return false;
} else if (event.ctrlKey && event.shiftKey && event.keyCode == 73) { // Prevent Ctrl+Shift+I
return false;
} else if (event.ctrlKey &&
(event.keyCode === 67 ||
event.keyCode === 86 ||
event.keyCode === 85 ||
event.keyCode === 117)) {
return false;
}
});
}
commonControl();
})(jQuery);
</script>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-Y5HEW841ZF"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-Y5HEW841ZF');
</script>
<script type="text/javascript" src="//wcs.naver.net/wcslog.js"></script>
<script type="text/javascript">
if(!wcs_add) var wcs_add = {};
wcs_add["wa"] = "25a54f04e2dbf";
if(window.wcs) {
wcs_do();
}
</script>
<div class="#menubar menu_toolbar ">
<h2 class="screen_out">티스토리툴바</h2>
<div class="btn_tool btn_tool_type1" id="menubar_wrapper" data-tistory-react-app="Menubar"></div><div class="btn_tool"><button class="btn_menu_toolbar btn_subscription #subscribe" data-blog-id="70948" data-url="https://rudaks.tistory.com" data-device="web_pc"><strong class="txt_tool_id">[루닥스 블로그] 연습만이 살길이다</strong><em class="txt_state">구독하기</em><span class="img_common_tistory ico_check_type1"></span></button></div></div>
<div class="layer_tooltip">
<div class="inner_layer_tooltip">
<p class="desc_g"></p>
</div>
</div>
<div id="editEntry" style="position:absolute;width:1px;height:1px;left:-100px;top:-100px"></div>
<!-- CallBack - START -->
<script> (function () {
var blogTitle = '[루닥스 블로그] 연습만이 살길이다';
(function () {
function isShortContents () {
return window.getSelection().toString().length < 30;
}
function isCommentLink (elementID) {
return elementID === 'commentLinkClipboardInput'
}
function copyWithSource (event) {
if (isShortContents() || isCommentLink(event.target.id)) {
return;
}
var range = window.getSelection().getRangeAt(0);
var contents = range.cloneContents();
var temp = document.createElement('div');
temp.appendChild(contents);
var url = document.location.href;
var decodedUrl = decodeURI(url);
var postfix = ' [' + blogTitle + ':티스토리]';
event.clipboardData.setData('text/plain', temp.innerText + '\n출처: ' + decodedUrl + postfix);
event.clipboardData.setData('text/html', '<pre data-ke-type="codeblock">' + temp.innerHTML + '</pre>' + '출처: <a href="' + url + '">' + decodedUrl + '</a>' + postfix);
event.preventDefault();
}
document.addEventListener('copy', copyWithSource);
})()
})()</script>
<!-- CallBack - END -->
<!-- NaverAnalytics - START -->
<script type="text/javascript" src="//wcs.naver.net/wcslog.js"></script>
<script type="text/javascript">if(!wcs_add) var wcs_add = {};
wcs_add["wa"] = encodeURI("25a54f04e2dbf");
wcs_do();</script>
<!-- NaverAnalytics - END -->
<div style="margin:0; padding:0; border:none; background:none; float:none; clear:none; z-index:0"></div>
<script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-a3521ce672f4c9ba67dd0de5f01de119868095fe/static/script/common.js"></script>
<script type="text/javascript">window.roosevelt_params_queue = window.roosevelt_params_queue || [{channel_id: 'dk', channel_label: '{tistory}'}]</script>
<script type="text/javascript" src="//t1.daumcdn.net/midas/rt/dk_bt/roosevelt_dk_bt.js" async="async"></script>
<script>window.tiara = {"svcDomain":"user.tistory.com","section":"글뷰","trackPage":"글뷰_보기","page":"글뷰","key":"70948-730","customProps":{"userId":"0","blogId":"70948","entryId":"730","role":"guest","trackPage":"글뷰_보기","filterTarget":false},"entry":{"entryId":"730","entryTitle":"[react 번역] <title> 컴포넌트","entryType":"POST","categoryName":"번역 자료","categoryId":"1213207","serviceCategoryName":"IT 인터넷","serviceCategoryId":401,"author":"88927","authorNickname":"루닥스","blogNmae":"[루닥스 블로그] 연습만이 살길이다","image":"","plink":"/entry/react-%EB%B2%88%EC%97%AD-title-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8","tags":[]},"kakaoAppKey":"3e6ddd834b023f24221217e370daed18","appUserId":"null"}</script>
<script type="module" src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/index.js"></script>
<script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/polyfills-legacy.js" nomodule="true" defer="true"></script>
<script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/index-legacy.js" nomodule="true" defer="true"></script>
</body>
<!--script defer src="https://tistory1.daumcdn.net/tistory/5087602/skin/images/codeblock.js?_version_=1695177568"></script-->
</html>