๐ŸŒฟ Thymeleaf - Fragment (๊ณตํ†ต์˜์—ญ์ฒ˜๋ฆฌ)

Kim Dae Hyunยท2021๋…„ 7์›” 21์ผ
2

Thymeleaf

๋ชฉ๋ก ๋ณด๊ธฐ
1/3
post-thumbnail

๐Ÿš€
๊ฐ„๋‹จํ•œ Admin ํŽ˜์ด์ง€ ์ •๋„๋Š” ์Šค์Šค๋กœ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋„๋ก ํ…œํ”Œ๋ฆฟ ์—”์ง„์„ ๊ณต๋ถ€ํ•ฉ๋‹ˆ๋‹ค !

๐Ÿ”Ž ๊ณตํ†ต ์˜์—ญ ์ฒ˜๋ฆฌ๋ฅผ ํ•˜๋Š” ์ด์œ 

์›น ํŽ˜์ด์ง€์˜ ๊ฒฝ์šฐ ๊ณตํ†ต์œผ๋กœ ๋ฐ˜๋ณต๋˜๋Š” ์˜์—ญ์ด ๋งŽ์ด ์žˆ์Šต๋‹ˆ๋‹ค.
ํŽ˜์ด์ง€์˜ ์ •๋ณด๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ํ—ค๋”๋ถ€๋ถ„, ๋ฉ”๋‰ด ํƒญ์„ ๋‚˜ํƒ€๋‚ด๋Š” ๋„ค๋น„๊ฒŒ์ด์…˜ ๋ฐ”, ์ €์ž‘๊ถŒ ์ •๋ณด ๋“ฑ์„ ํ‘œ์‹œํ•˜๋Š” ํ‘ธํ„ฐ ๋“ฑ ์—ฌ๋Ÿฌ ํŽ˜์ด์ง€์— ๊ฑฐ์ณ ๋ฐ˜๋ณต๋˜๋Š” ์˜์—ญ์ด ์กด์žฌํ•ฉ๋‹ˆ๋‹ค.

์ด๋Ÿฐ ๊ณตํ†ต์˜ ์˜์—ญ๋“ค์„ ๋งค ํŽ˜์ด์ง€์˜ HTMLํŒŒ์ผ์— ๋ฐ˜๋ณตํ•œ๋‹ค๋ฉด ๊ฐ ํŒŒ์ผ์ด ์ง€์ €๋ถ„ํ•ด์ง€๋Š” ๊ฒƒ์€ ๋ฌผ๋ก ์ด๊ณ  ๋ณ€๊ฒฝ์˜ ์ง€์  ๋˜ํ•œ ๋ถ„์‚ฐ๋˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

๊ณตํ†ต์˜ ์˜์—ญ์„ ๋ถ„๋ฆฌํ•จ์œผ๋กœ์จ ๋ณ€๊ฒฝ์ง€์ ์„ ์ตœ์†Œํ™”ํ•  ์ˆ˜ ์žˆ์–ด์„œ ๋ณ€๊ฒฝ์— ์ฐธ ์šฉ์ดํ•ฉ๋‹ˆ๋‹ค.


๐Ÿ”Ž th:fagment ๋ฌธ๋ฒ•

Thymeleaf๊ฐ€ ์ œ๊ณตํ•˜๋Š” fragment ๋ฌธ๋ฒ•์— ๋Œ€ํ•ด ๊ฐ„๋‹จํ•˜๊ฒŒ ์•Œ์•„๋ณผ๊ป˜์š”.

๋จผ์ € ๊ณตํ†ต ์˜์—ญ์„ ์ •์˜ํ•ฉ๋‹ˆ๋‹ค.
<footer>๋ฅผ th:fragment๋ฅผ ์ด์šฉํ•ด ์กฐ๊ฐํ™”ํ•˜์˜€๊ณ  ์ด๋ฆ„์€ footerFragment๋กœ ์„ค์ •ํ•˜์˜€์Šต๋‹ˆ๋‹ค.

[ footer.html ]

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>

<footer th:fragment="footerFragment">
  <p> COPYRIGHT@ dhk22</p>
</footer>

</body>
</html>

fragment๋Š” ๋Œ€ํ‘œ์ ์œผ๋กœ ๋‘ ๊ฐ€์ง€ ๋ฐฉ๋ฒ•์œผ๋กœ ์ด์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๐Ÿ”Ž th:insert

  • insert๋Š” ํƒœ๊ทธ ๋‚ด๋กœ ์กฐ๊ฐ์„ ์‚ฝ์ž…ํ•˜๋Š” ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค.
  • ์—ฌ๊ธฐ์„œ ํƒœ๊ทธ ๋‚ด๋ž€ <div> ์•ˆ์ชฝ์— <footer>๊ฐ€ ์œ„์น˜ํ•˜๋Š” ๊ฒƒ ์ž…๋‹ˆ๋‹ค.
  • ๋žœ๋”๋งํ•œ ๊ฒฐ๊ณผ๋ฅผ ์†Œ์Šค๋ณด๊ธฐ๋กœ ํ™•์ธํ•ด๋ณด๋ฉด ์กฐ๊ฐํ™”ํ•œ footer๊ฐ€ div ๋‚ด๋กœ ์‚ฝ์ž…๋œ ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๐Ÿ”Ž th:replace

  • replace๋Š” ํ•ด๋‹น ํƒœ๊ทธ๋ฅผ ์™„์ „ํžˆ ๋Œ€์ฒดํ•˜๋Š” ๋ฐฉ๋ฒ•์ž…๋‹ˆ๋‹ค.
  • ๋žœ๋”๋งํ•œ ๊ฒฐ๊ณผ๋ฅผ ์†Œ์Šค๋ณด๊ธฐ๋กœ ํ™•์ธํ•ด๋ณด๋ฉด ์กฐ๊ฐํ™”ํ•œ footer๊ฐ€ div๋ฅผ ๋Œ€์ฒดํ•œ ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์กฐ๊ฐ์„ ์‚ฌ์šฉํ•  ๋•Œ๋Š” Thymeleaf๊ฐ€ ์ œ๊ณตํ•˜๋Š” ์กฐ๊ฐ ๋ฌธ๋ฒ•์ธ ~{...} ๋ฅผ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.
::๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์•ž์—๋Š” ์กฐ๊ฐ์ด ์žˆ๋Š” ๊ฒฝ๋กœ๋ฅผ ๋’ค์—๋Š” ์กฐ๊ฐ์˜ ์ด๋ฆ„์„ ์„ค์ •ํ•ด์ค๋‹ˆ๋‹ค.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>Main Page</h2>
<div th:insert="~{/test/footer :: footerFragment}"></div>

<div th:replace="~{/test/footer :: footerFragment}"></div>
</body>
</html>

๋žœ๋”๋ง ํ•œ ๊ฒฐ๊ณผ์ž…๋‹ˆ๋‹ค.

๐Ÿ”Ž Fragment์—์„œ ํŒŒ๋ผ๋ฏธํ„ฐ ์‚ฌ์šฉ

fragment์ธก HTML ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค.

ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ ๋ฐ›๋Š” ํ˜•์‹์ด ๊ต‰์žฅํžˆ ์ง๊ด€์ ์ด์—ฌ์„œ ์‚ฌ์šฉํ•˜๊ธฐ์—๋Š” ์ข‹์€ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๋‹จ์ˆœํžˆ ์กฐ๊ฐ ์ด๋ฆ„ ์˜†์— ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ ์ˆœ์„œ๋Œ€๋กœ ์ ์–ด์ฃผ์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค.
ํ‘œํ˜„์‹์œผ๋กœ๋Š” Thymeleaf์˜ ์ƒ์ˆ˜ ํ‘œํ˜„์‹์ธ |..|์™€ ๋ณ€์ˆ˜ ํ‘œํ˜„์‹์ธ ${...}๋ฅผ ์‚ฌ์šฉํ•˜์˜€์Šต๋‹ˆ๋‹ค.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>

<footer th:fragment="footerFragmentParam (param1, param2)">
  <p> COPYRIGHT@ dhk22</p><br/>
  <p th:text="|Hi, ${param1}|"></p>
  <p th:text="|Im ${param2}|"></p>
</footer>

</body>
</html>

fragment๋ฅผ ์‚ฌ์šฉํ•˜๋Š” HTML ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค.

๊ธฐ์กด์˜ ๋ฐฉ์‹๊ณผ ๋™์ผํ•˜๊ฒŒ ์กฐ๊ฐ ํ‘œํ˜„์‹์ธ ~{..}์™€ :: ํ‚ค์›Œ๋“œ๋ฅผ ์‚ฌ์šฉ์˜€๊ณ  ํŒŒ๋ผ๋ฏธํ„ฐ๋กœ 'everyone' , 'kim'์„ ๋„˜๊ฒจ์ฃผ์—ˆ์Šต๋‹ˆ๋‹ค.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h2>Main Page</h2>

<div th:replace="~{/test/footer :: footerFragmentParam ('everyone', 'kim')}"></div>

</body>
</html>

๋žœ๋”๋ง ๊ฒฐ๊ณผ์ž…๋‹ˆ๋‹ค.

๐Ÿ”Ž ํŒŒ๋ผ๋ฏธํ„ฐ์— ๊ฐ’์ด ์•„๋‹Œ ํƒœ๊ทธ ์ž์ฒด๋ฅผ ์ „๋‹ฌ

Fragment์˜ ํŒŒ๋ผ๋ฏธํ„ฐ์—๋Š” ๊ฐ’ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ํƒœ๊ทธ ์ž์ฒด๋ฅผ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Fragment ์ธก HTML ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค.
์—ฌ๊ธฐ์„œ ํŒŒ๋ผ๋ฏธํ„ฐ๋กœ ์ „๋‹ฌ๋˜๋Š” title๊ณผ contents๋Š” ํƒœ๊ทธ์ž…๋‹ˆ๋‹ค.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body th:fragment="common_body(title, contents)">
    <h1 th:replace="${title}">Title</h1>
    <section th:replace="${contents}">contents</section>
</body>
</html>

Fragment๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ชฝ์˜ HTML ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค.
h1 ํƒœ๊ทธ์™€ section ํƒœ๊ทธ ์ž์ฒด๋ฅผ common_body fragment์— ์ „๋‹ฌํ•ด์ฃผ์—ˆ์Šต๋‹ˆ๋‹ค.

ํƒœ๊ทธ ์ „๋‹ฌ์‹œ ๋ฌธ๋ฒ•์ด ์ข€ ์ƒ์†Œํ•œ๋ฐ ~{::ํƒœ๊ทธ๋ช…} ์ž…๋‹ˆ๋‹ค.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body th:replace="~{test/testFragment :: common_body(~{::h1}, ~{::section})}">
  <h1>Main Page title</h1>
  <section>
    <h2>Main Page contents</h2>
  </section>

</body>
</html>

๋žœ๋”๋ง ๊ฒฐ๊ณผ์ž…๋‹ˆ๋‹ค.

ํƒœ๊ทธ๋ฅผ ์ง์ ‘ ์ „๋‹ฌํ•จ์œผ๋กœ ์ข€ ๋” ๋ฒ”์šฉ์ ์ธ ์กฐ๊ฐํ™”๊ฐ€ ๊ฐ€๋Šฅํ•ด์กŒ์Šต๋‹ˆ๋‹ค.

profile
์ข€ ๋” ์ฒœ์ฒœํžˆ ๊นŒ๋จน๊ธฐ ์œ„ํ•ด ๊ธฐ๋กํ•ฉ๋‹ˆ๋‹ค. ๐Ÿง

0๊ฐœ์˜ ๋Œ“๊ธ€