웹 화면을 만들다 보면 다른 페이지로 이동하는 링크가 필요하다. 단순히 /hello 같은 고정 주소를 쓰기도 하지만, 실제 개발에서는 쿼리 파라미터(검색 조건, 페이지 번호 등)나 경로 변수(게시글 ID, 사용자 이름 등)를 붙여야 할 때가 많다.
Thymeleaf는 이런 경우를 간단히 처리할 수 있도록 @{...} 문법을 제공한다.
1. 컨트롤러에서 데이터 준비하기
컨트롤러에서 URL에 넣을 값을 모델에 담는다.
@GetMapping("/link")
public String link(Model model) {
model.addAttribute("param1", "data1");
model.addAttribute("param2", "data2");
return "basic/link";
}여기서 param1=data1, param2=data2 값을 뷰로 넘긴다.
2. 뷰 템플릿에서 URL 생성하기
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>URL 링크</title>
</head>
<body>
<h1>URL 링크</h1>
<ul>
<!-- 단순 URL -->
<li><a th:href="@{/hello}">basic url</a></li>
<!-- 쿼리 파라미터 -->
<li><a th:href="@{/hello(param1=${param1}, param2=${param2})}">hello query param</a></li>
<!-- 경로 변수 -->
<li><a th:href="@{/hello/{param1}/{param2}(param1=${param1}, param2=${param2})}">path variable</a></li>
<!-- 경로 변수 + 쿼리 파라미터 -->
<li><a th:href="@{/hello/{param1}(param1=${param1}, param2=${param2})}">path variable + query parameter</a></li>
</ul>
</body>
</html>
3. 각각 어떻게 동작할까?
1) 단순한 URL
<a th:href="@{/hello}">basic url</a>결과: /hello
그냥 고정된 경로를 만든다.
2) 쿼리 파라미터
<a th:href="@{/hello(param1=${param1}, param2=${param2})}">hello query param</a>결과: /hello?param1=data1¶m2=data2
- 괄호 ( ) 안에서 param1=${param1} 처럼 key=value 를 쓰면 자동으로 쿼리스트링이 붙는다.
- ${param1}은 모델에서 가져온 값 data1으로 치환된다.
3) 경로 변수
<a th:href="@{/hello/{param1}/{param2}(param1=${param1}, param2=${param2})}">path variable</a>결과: /hello/data1/data2
- {param1}, {param2} 같은 플레이스홀더를 경로에 넣고,
- (param1=${param1}, param2=${param2}) 로 치환해 준다.
4) 경로 변수 + 쿼리 파라미터
<a th:href="@{/hello/{param1}(param1=${param1}, param2=${param2})}">path variable + query parameter</a>결과: /hello/data1?param2=data2
- {param1} → data1 로 치환
- 남은 param2는 쿼리스트링으로 붙는다
마무리하며
웹 애플리케이션을 만들 때 URL을 어떻게 표현할지는 아주 중요하다. 단순히 고정 주소(/hello)만 필요한 게 아니라, 상황에 따라 검색 조건 같은 쿼리 파라미터나 게시글 ID 같은 경로 변수를 함께 써야 한다.
Thymeleaf는 이런 요구를 위해 @{...} 문법을 제공한다. 이 문법을 활용하면 다음과 같은 장점이 있다.
- 코드 간결함 : 문자열을 직접 이어 붙일 필요 없이 직관적으로 URL을 만들 수 있다.
- 자동 치환 : ${param}으로 전달받은 값을 안전하게 넣어주고, 특수문자는 자동으로 URL 인코딩된다.
- 일관된 문법 : 단순 경로, 쿼리 파라미터, 경로 변수를 모두 같은 방식으로 처리할 수 있다.
- 가독성 향상 : HTML 코드 안에서 URL 조합 로직이 깔끔하게 표현되어 유지보수가 쉽다.
즉, URL 표기를 간단하고 안전하게 처리하기 위해 Thymeleaf가 이런 기능을 제공하는 것이고, 덕분에 우리는 복잡한 문자열 조합 없이 직관적인 코드로 웹 화면을 구성할 수 있다.
감사합니다.
'타임리프' 카테고리의 다른 글
| [Thymeleaf] 연산 (0) | 2025.09.15 |
|---|---|
| [Thymeleaf] 리터럴 (1) | 2025.09.15 |
| [Thymeleaf] 유틸리티 객체와 날짜 (0) | 2025.09.15 |
| [Thymeleaf] 변수 -SpringEL (0) | 2025.09.11 |
| [Thymeleaf] 텍스트 -text, utext (0) | 2025.09.11 |