<div class="type-placeholder" style="font-size: 15px; letter-spacing: -0.3px; color: #abb0b5; white-space: pre-wrap;">안녕하세요</div>
<div class="type-placeholder" style="font-size: 15px; letter-spacing: -0.3px; color: #abb0b5; white-space: pre-wrap;">&nbsp;</div>
<div class="type-placeholder" style="font-size: 15px; letter-spacing: -0.3px; color: #abb0b5; white-space: pre-wrap;">레이아웃을 사용해서</div>
<div class="type-placeholder" style="font-size: 15px; letter-spacing: -0.3px; color: #abb0b5; white-space: pre-wrap;">컨텐츠 영역만 변경되고 사이드바 같은곳은 한번만 불러올수있는 템플릿이 있나요?</div>
<div class="type-placeholder" style="font-size: 15px; letter-spacing: -0.3px; color: #abb0b5; white-space: pre-wrap;">&nbsp;</div>
<div class="type-placeholder" style="font-size: 15px; letter-spacing: -0.3px; color: #abb0b5; white-space: pre-wrap;">예를들어서 사이드바 메뉴를 한번 불러오고 content영역만 변경되면서 공통영역은 변경되지않게 하고싶은데,</div>
<div class="type-placeholder" style="font-size: 15px; letter-spacing: -0.3px; color: #abb0b5; white-space: pre-wrap;">&nbsp;</div>
<div class="type-placeholder" style="font-size: 15px; letter-spacing: -0.3px; color: #abb0b5; white-space: pre-wrap;">content영역을 div잡고 ajax url load해줘서 하는 방법밖에 없을까요?</div>

<p><span style="font-size: 12pt; font-family: Arial;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;안녕하세요, {} 님. 공식 서포터즈 codesweaver 입니다.\n.\n{내용}\n.\n감사합니다.&quot;}" data-sheets-userformat="{&quot;2&quot;:1063747,&quot;3&quot;:{&quot;1&quot;:0},&quot;4&quot;:{&quot;1&quot;:2,&quot;2&quot;:16777215},&quot;9&quot;:0,&quot;11&quot;:0,&quot;12&quot;:0,&quot;14&quot;:{&quot;1&quot;:2,&quot;2&quot;:0},&quot;15&quot;:&quot;Arial&quot;,&quot;16&quot;:12,&quot;23&quot;:1}" data-sheets-textstyleruns="{&quot;1&quot;:0}{&quot;1&quot;:13,&quot;2&quot;:{&quot;2&quot;:{&quot;1&quot;:2,&quot;2&quot;:1136076},&quot;9&quot;:1}}{&quot;1&quot;:20}" data-sheets-hyperlinkruns="{&quot;1&quot;:13,&quot;2&quot;:&quot;https://www.inflearn.com/blogs/617&quot;}{&quot;1&quot;:20}"><span style="font-size: 12pt;">안녕하세요,&nbsp;</span></span><span style="background-color: #ffffff; color: #495057; font-family: 'Noto Sans KR', -apple-system, 'system-ui', 'system-ui', 'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', Helvetica; font-size: 14px;">리액트공부해보자</span><span style="font-family: Arial; font-size: 12pt;">&nbsp;님. </span><span style="font-family: Arial; font-size: 12pt; text-decoration-line: underline; text-decoration-skip-ink: none; color: #1155cc;"><a class="in-cell-link" href="https://www.inflearn.com/blogs/617" target="_blank" rel="noopener">공식 서포터즈</a></span><span style="font-family: Arial; font-size: 12pt;"> codesweaver 입니다.</span></p>
<p><span style="font-size: 12pt; font-family: Arial;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;안녕하세요, {} 님. 공식 서포터즈 codesweaver 입니다.\n.\n{내용}\n.\n감사합니다.&quot;}" data-sheets-userformat="{&quot;2&quot;:1063747,&quot;3&quot;:{&quot;1&quot;:0},&quot;4&quot;:{&quot;1&quot;:2,&quot;2&quot;:16777215},&quot;9&quot;:0,&quot;11&quot;:0,&quot;12&quot;:0,&quot;14&quot;:{&quot;1&quot;:2,&quot;2&quot;:0},&quot;15&quot;:&quot;Arial&quot;,&quot;16&quot;:12,&quot;23&quot;:1}" data-sheets-textstyleruns="{&quot;1&quot;:0}{&quot;1&quot;:13,&quot;2&quot;:{&quot;2&quot;:{&quot;1&quot;:2,&quot;2&quot;:1136076},&quot;9&quot;:1}}{&quot;1&quot;:20}" data-sheets-hyperlinkruns="{&quot;1&quot;:13,&quot;2&quot;:&quot;https://www.inflearn.com/blogs/617&quot;}{&quot;1&quot;:20}"><span style="font-size: 12pt;">.<br />리액트에서 라우터를 이용할 경우 말씀하신 것처럼 구현가능한 것으로 압니다.&nbsp;</span></span></p>
<p><span style="font-size: 12pt; font-family: Arial;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;안녕하세요, {} 님. 공식 서포터즈 codesweaver 입니다.\n.\n{내용}\n.\n감사합니다.&quot;}" data-sheets-userformat="{&quot;2&quot;:1063747,&quot;3&quot;:{&quot;1&quot;:0},&quot;4&quot;:{&quot;1&quot;:2,&quot;2&quot;:16777215},&quot;9&quot;:0,&quot;11&quot;:0,&quot;12&quot;:0,&quot;14&quot;:{&quot;1&quot;:2,&quot;2&quot;:0},&quot;15&quot;:&quot;Arial&quot;,&quot;16&quot;:12,&quot;23&quot;:1}" data-sheets-textstyleruns="{&quot;1&quot;:0}{&quot;1&quot;:13,&quot;2&quot;:{&quot;2&quot;:{&quot;1&quot;:2,&quot;2&quot;:1136076},&quot;9&quot;:1}}{&quot;1&quot;:20}" data-sheets-hyperlinkruns="{&quot;1&quot;:13,&quot;2&quot;:&quot;https://www.inflearn.com/blogs/617&quot;}{&quot;1&quot;:20}"><span style="font-size: 12pt;">과거에는 iframe을 사용하여 구현하기도 하였으나 이는 추천할만한 것이 못되고,</span></span></p>
<p><span style="font-size: 12pt; font-family: Arial;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;안녕하세요, {} 님. 공식 서포터즈 codesweaver 입니다.\n.\n{내용}\n.\n감사합니다.&quot;}" data-sheets-userformat="{&quot;2&quot;:1063747,&quot;3&quot;:{&quot;1&quot;:0},&quot;4&quot;:{&quot;1&quot;:2,&quot;2&quot;:16777215},&quot;9&quot;:0,&quot;11&quot;:0,&quot;12&quot;:0,&quot;14&quot;:{&quot;1&quot;:2,&quot;2&quot;:0},&quot;15&quot;:&quot;Arial&quot;,&quot;16&quot;:12,&quot;23&quot;:1}" data-sheets-textstyleruns="{&quot;1&quot;:0}{&quot;1&quot;:13,&quot;2&quot;:{&quot;2&quot;:{&quot;1&quot;:2,&quot;2&quot;:1136076},&quot;9&quot;:1}}{&quot;1&quot;:20}" data-sheets-hyperlinkruns="{&quot;1&quot;:13,&quot;2&quot;:&quot;https://www.inflearn.com/blogs/617&quot;}{&quot;1&quot;:20}"><span style="font-size: 12pt;">메뉴 구성들이 간단하다면 Ajax를 이용하여 구현하는 것이 간단하긴 하며,</span></span></p>
<p><span style="font-size: 12pt; font-family: Arial;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;안녕하세요, {} 님. 공식 서포터즈 codesweaver 입니다.\n.\n{내용}\n.\n감사합니다.&quot;}" data-sheets-userformat="{&quot;2&quot;:1063747,&quot;3&quot;:{&quot;1&quot;:0},&quot;4&quot;:{&quot;1&quot;:2,&quot;2&quot;:16777215},&quot;9&quot;:0,&quot;11&quot;:0,&quot;12&quot;:0,&quot;14&quot;:{&quot;1&quot;:2,&quot;2&quot;:0},&quot;15&quot;:&quot;Arial&quot;,&quot;16&quot;:12,&quot;23&quot;:1}" data-sheets-textstyleruns="{&quot;1&quot;:0}{&quot;1&quot;:13,&quot;2&quot;:{&quot;2&quot;:{&quot;1&quot;:2,&quot;2&quot;:1136076},&quot;9&quot;:1}}{&quot;1&quot;:20}" data-sheets-hyperlinkruns="{&quot;1&quot;:13,&quot;2&quot;:&quot;https://www.inflearn.com/blogs/617&quot;}{&quot;1&quot;:20}"><span style="font-size: 12pt;">예전 ebay 관리자 같은 경우 메뉴를 클릭하면 컨튼츠 내에 탭이 하나 추가 되며 화면을 Ajax로 불러오는 방식으로 구현되어있었는데, 이 방법은 UX 측면에서 만족도가 떨어지기에 이 방법도 추천 드리진 않습니다.</span></span></p>
<p><span style="font-size: 12pt; font-family: Arial;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;안녕하세요, {} 님. 공식 서포터즈 codesweaver 입니다.\n.\n{내용}\n.\n감사합니다.&quot;}" data-sheets-userformat="{&quot;2&quot;:1063747,&quot;3&quot;:{&quot;1&quot;:0},&quot;4&quot;:{&quot;1&quot;:2,&quot;2&quot;:16777215},&quot;9&quot;:0,&quot;11&quot;:0,&quot;12&quot;:0,&quot;14&quot;:{&quot;1&quot;:2,&quot;2&quot;:0},&quot;15&quot;:&quot;Arial&quot;,&quot;16&quot;:12,&quot;23&quot;:1}" data-sheets-textstyleruns="{&quot;1&quot;:0}{&quot;1&quot;:13,&quot;2&quot;:{&quot;2&quot;:{&quot;1&quot;:2,&quot;2&quot;:1136076},&quot;9&quot;:1}}{&quot;1&quot;:20}" data-sheets-hyperlinkruns="{&quot;1&quot;:13,&quot;2&quot;:&quot;https://www.inflearn.com/blogs/617&quot;}{&quot;1&quot;:20}"><span style="font-size: 12pt;">.</span></span><span style="font-size: 12pt; font-family: Arial;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;안녕하세요, {} 님. 공식 서포터즈 codesweaver 입니다.\n.\n{내용}\n.\n감사합니다.&quot;}" data-sheets-userformat="{&quot;2&quot;:1063747,&quot;3&quot;:{&quot;1&quot;:0},&quot;4&quot;:{&quot;1&quot;:2,&quot;2&quot;:16777215},&quot;9&quot;:0,&quot;11&quot;:0,&quot;12&quot;:0,&quot;14&quot;:{&quot;1&quot;:2,&quot;2&quot;:0},&quot;15&quot;:&quot;Arial&quot;,&quot;16&quot;:12,&quot;23&quot;:1}" data-sheets-textstyleruns="{&quot;1&quot;:0}{&quot;1&quot;:13,&quot;2&quot;:{&quot;2&quot;:{&quot;1&quot;:2,&quot;2&quot;:1136076},&quot;9&quot;:1}}{&quot;1&quot;:20}" data-sheets-hyperlinkruns="{&quot;1&quot;:13,&quot;2&quot;:&quot;https://www.inflearn.com/blogs/617&quot;}{&quot;1&quot;:20}"><span style="font-size: 12pt;">감사합니다.</span></span></p>

Inflearn Community Q&A

공통영역만 변경되도록