navbar 만들기 (th:fragment, th:replace)

여러 페이지에서 사용하는 내비게이션 바 같은 경우는

<div class="nav">
    <a class="logo">SpringMall</a>
    <a href="/list">List</a>
    <a href="/write">Write</a>
</div>

 

이렇게 만든다고 하면 계속 만들어주는 것도 일이다

그래서 이 ui 자체를 조각으로 분리해서 여러 곳에서도 사용이 가능하다

 

따로 nav.html 식으로 파일을 만들어준다

그 안에

<div class="nav" th:fragment="navbar">
    <a class="logo">SpringMall</a>
    <a href="/list">List</a>
    <a href="/write">Write</a>
</div>

 

위에 코드하고 다를게 없어보이지만 th:frament="변수명" 이 추가되었다

타임리프 문법 추가시 다른곳에서도 다른 타임리프 문법으로 추가가 가능하다

 

<div th:replace="~{ nav.html::navbar }"></div>

 

사용할 페이지에 아무 div 만들고

th:replace="~{ 경로::변수명 }" 입력시

위 div가 갈아치워진다

th:insert 로도 추가도 가능하지만

갈아치우는게 일반적