[Spring Boot] 타임리프 문법 - th:href

th:href

th:href 는 일반적인 html의 href 속성과 동일한 기능을 수행한다고 볼 수 있습니다.

경로에 접근하여 리소스에 접근하여 호출하거나, 다른 페이지로 이동하거나 할 때 url, 경로와 같은 값을 넣어 사용합니다.

 

a 태그 - api 호출 링크

<a th:href="@{/gds/project/detail/{projectId}(projectId=${thirdProject.projectId})}">
</a>

href 속성을 주로 사용하는 a 태그는 기본적으로 href 속성으로 링크를 시켜 api에 매핑을 시키거나 페이지를 이동하는 동작을 수행합니다.

타임리프는 href 속성에 th 키워드를 붙여 사용하며, 링크를 시킬 api url 주소라든지 이동하고자 하는 페이지의 이동 경로를 기입할 때 "@{링크 경로/주소}" 식으로 기입하여 사용합니다.

 

위의 예시 코드에서는 @{} 안에 매핑 시켜 호출할 api 주소를 기입하였으며, ${} 기호를 통해 데이터를 직접적으로 projectId 라는 요청 변수로 넘겨주게끔 하였습니다.

 

+ api 호출 시 넘겨줄 데이터에 대한 지정 사항

- 데이터를 넘겨줄 api 주소가 PathVariable 을 사용하는 경우 

url 주소를 모두 넣어주고 PathVariable 로 지정된 경로 부분의 바로 오른쪽에 () 기호와 함께 안에 해당 PathVariable 변수에 어떤 데이터를 넘겨줄 것인지 명시

(예 : @{/gds/project/detail/{projectId}(projectId=${thirdProject.projectId})})

- 데이터를 넘겨줄 api 주소가 RequestParam 을 사용하는 경우

url 주소를 모두 넣어주고 PathVairable 사용할 때와는 다르게 경로 마지막 부분에 () 기호와 함께 해당 RequestParam 변수명을 일치하게 하여 넘겨줄 데이터를 병시

(예 : @{/gds/product/add(categoryName=${categoryName})})

 

@{} : 링크 시 사용 기호

${} : 데이터 사용 기호

 

 

link 태그 - 프로젝트 내부 자원 접근 호출

<link th:href="@{/img/favicon32.png}" rel="icon" type="image/png" sizes="32x32">
<link th:href="@{/css/style.css}" rel="stylesheet">

내부 소스에 접근하여 호출하고자 할 때는 해당 자원이 존재하고 있는 경로 주소를 @{} 기호 내부에 적어 호출하면 됩니다.

위의 예시 코드에서는 css 파일이나 프로젝트 내부에 저장된 이미지와 같은 파일들에 접근 해서 import 시키기 위해 사용하였습니다.

 

각각 최상의 루트 디렉토리로 잡혀있는 resources/static 경로에 존재하는 img 디렉토리, css 디렉토리에 접근하여 이미지와 css 파일을 호출하여 import 시켜주는 것입니다.