location.href에 타임 리프 변수 넣기
타임리프에서 GET 방식으로 필요한 파라미터를 집어넣을 때, <a> 태그의 th:href에서는 무리 없이 값이 들어갔지만 th:onclick에서 location.href 사용 시에는 th:href처럼 동작하지 않았다. 그래서 조금 다르게 작성하였다.
쉬운 이해를 위해 두 가지 코드를 비교해본다.
th:href
<a th:href="@{view(uid=${data.uid})}">View page</a>url임을 명시할 때는 @{}를 사용한다. GET 방식으로 데이터를 전달하려면 @{} 안에 (key=value)를 넣어준다.
위 코드를 예시로 하였을 때 view는 이동할 페이지이고, uid는 key이며 ${data.uid}가 value이다.
만약 ${data.uid}에 들어가는 값이 1이라고 가정하고 위 <a> 태그를 클릭했을 때 url은 아래와 같을 것이다.
localhost:8080/view?uid=1
이제 위 <a> 태그 코드 부분을 <button th:onclick=location.href>으로 바꿔본다.
th:onclick (location.href)
두 가지 방법을 사용할 수 있는데, 더하기 연산자(+)를 직접적으로 사용하냐 마냐에 따라 다르다.
첫 번째 방법
+ 연산자를 사용한 첫 번째 방법은 아래와 같다.
<button th:onclick="'location.href=\'' + @{view(uid=${ad.uid})} + '\''">View page</button>이스케이프 문자인 \'를 사용해야 하므로 가독성이 떨어지고, 코드 작성도 마냥 편하지 않다.
location.href 부분과 그 속성 값으로 들어가는 @{} 부분을 나누어 작성해야 한다.
이스케이프 문자를 단순 '로 치환하여 살펴보면 다음과 같다.
<button th:onclick="'location.href='' + @{view(uid=${ad.uid})} + '''">View page</button>우선 큰 따옴표(")로 location.href~@{} 전체 부분을 묶는다.
큰 따옴표로 묶은 문자열 내에서 작은따옴표를 사용해 location.href 부분과 @{} 부분을 나눈다.
따라서 "'location.href' + @{} + ''" 이런 느낌이다. 이때 location.href의 속성 값은 (여기서는 @{} 부분) 작은따옴표(')로 감싸주어야 하기 때문에 이스케이프 문자를 대신 쓴 것이다.
'location.href'' + @{} + '''
↓ 이스케이프 문자 사용 ↓
'location.href\'' + @{} + '\''
작은따옴표 내 작은따옴표가 들어가면 거기서 문자열이 끝나는 것으로 인식하기 때문에 안쪽 작은따옴표는 이스케이프 문자로 작성하는 것이다.
처음에는 아래와 같은 방법으로 작성했었는데 오류가 발생했다.
// 잘못된 방법
th:onclick="location.href='" + @{view(uid=${ad.uid})} + "'"큰 따옴표로 location.href 부분과 @{} 부분을 나누는 건 불가능하기 때문에 위와 같은 방법을 사용한 것이다.
큰 따옴표로 문자열을 나누어 작성하면 Tag start is not closed 오류가 발생한다. onclick의 속성 값으로 들어가는 것은 무조건 큰 따옴표로 한 쌍으로만 묶은 문자열이어야 한다.
두 번째 방법 (추천)
위처럼 번거로운 코드 대신, + 연산자를 사용하지 않고 작성하는 방법도 존재한다.
<button th:onclick="|location.href='@{view(uid=${data.uid})}'|">View page</button>
location.href 앞 뒤로 | 를 작성해주면 된다.
|를 앞 뒤로 써주면 +연산자를 사용하지 않아도, 사용한 것과 같은 효과를 내기 때문에 간편하게 작성할 수 있다.
