Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

나구리의 개발공부기록

타임리프 - 기본기능, URL링크, 리터럴, 연산, 속성 값 설정, 반복, 조건부 평가 본문

인프런 - 스프링 완전정복 코스 로드맵/스프링 MVC 2편 - 백엔드 웹 개발 핵심 기술

타임리프 - 기본기능, URL링크, 리터럴, 연산, 속성 값 설정, 반복, 조건부 평가

소소한나구리 2024. 5. 15. 22:06

  출처 : 인프런 - 스프링 MVC 2편 - 백엔드 웹 개발 핵심 기술 (유료) / 김영한님  
  유료 강의이므로 정리에 초점을 두고 코드는 일부만 인용  

https://inf.run/GMo43

1. URL링크

1) URL 생성

(1) 설명

(2) BasicController - link() 추가

@GetMapping("/link")
public String link(Model model) {
    model.addAttribute("param1", "data1");
    model.addAttribute("param2", "data2");
    return "basic/link";
}

 

(3) link.html

  • 단순한 URL: @{/hello} -> /hello
  • 쿼리 파라미터: @{/hello(param1=${param1}, param2=${param2})} -> /hello?param1=data&param2=data2
    - ()에 있는 부분이 쿼리 파라미터로 처리 됨
  • 경로 변수: @{/hello/{param1}/{param2}(param1=${param1}, param2=${param2})} -> /hello/data1/data2
    - URL 경로상에 변수가 있으면 ()부분이 경로 변수로 처리됨
  • 경로 변수 + 쿼리 파라미터: @{/hello/{param1}(param1=${param1}, param2=${param2})} -> /hello/param1?param2=data
    - 경로 변수와 쿼리 파라미터를 함께 사용할 수 있음
<!DOCTYPE html>
<!-- 타임리프 선언 및 head태그 -->

<body>
<h1>URL 링크</h1>
<ul>
    <!-- 단순한 URL, @{/hello} -> /hello -->
    <li><a th:href="@{/hello}">basic url</a></li>

    <!-- 쿼리 파라미터, @{/hello}(여기에 내용이 쿼리파라미터로 처리됨)
    -> /hello?param1=data1&param2=data2 -->
    <li><a th:href="@{/hello(param1=${param1}, param2=${param2})}">hello query param</a></li>

    <!-- 경로 변수,@{/hello}/{param1}/{param2}(URL 경로상에 변수가 있으면 이부분은 경로 변수로 처리됨)
     -> /hello/data1/data2 -->
    <li><a th:href="@{/hello/{param1}/{param2}(param1=${param1}, param2=${param2})}">path variable</a></li>
    
    <!-- 경로변수와 쿼리 파라미터를 함께 사용 
    /hello/data1?param2=data2 -->
    <li><a th:href="@{/hello/{param1}(param1=${param1}, param2=${param2})}">path variable + query parameter</a></li>
</ul>
</body>
</html>

2. 리터럴

1) 리터럴(Literals)

(1) 설명

  • 소스 코드상에 고정된 값을 말하는 용어
  • ex) String a = "Hello": 여기에서 Hello는 문자 리터럴임
  • ex) int a = 10 * 20: 여기에서 10, 20은 숫자 리터럴임

(2) 타임리프의 리터럴

  • 문자: 'hello'
  • 숫자: 10
  • 불린: true, false
  • null: null
  • 타임리프에서 문자 리터럴은 항상 작은따옴표로 감싸야 하지만, 공백 없이 쭉 문자가 이어진다면 하나의 의미있는 토큰으로 인지하여 작은 따옴표를 생략할 수 있음
  • 룰 : A-Z, a-z, 0-9, [],.,-,_
  • 오류: <span th:text="hello world!"></span>은 중간에 공백이 있어서 하나의 의미있는 토큰으로 인식되지 않음
  • 수정: <span th:text="'hello world!'"></span> 작은 타옴표로 문자 리터럴을 감싸야 정상적으로 동작함

(3) BasicController - literal() 추가

@GetMapping("literal")
public String literal(Model model) {
    model.addAttribute("data", "Spring!");
    return "basic/literal";
}

 

(4) literal.html

<!DOCTYPE html>
<!-- 타임리프 선언 및 head태그 -->

<h1>리터럴</h1>
<ul>
    <!-- 주석의 문구는 ''로 감싸지 않아서 예외가 발생함-->
    <!--    <li>"hello world!" = <span th:text="hello world!"></span></li> -->

    <!--    두개의 문자열을 + 로 묶음-->
    <li>'hello' + ' world!' = <span th:text="'hello' + ' world!'"></span></li>

    <!--    공백이 있는 문자열을 ''로 묶음-->
    <li>'hello world!' = <span th:text="'hello world!'"></span></li>

    <!--    변수호출-->
    <li>'hello ' + ${data} = <span th:text="'hello ' + ${data}"></span></li>

    <!-- 리터럴 대체(||)로 자바코드의 내용을 대체-->
    <li>리터럴 대체 |hello ${data}| = <span th:text="|hello ${data}|"></span></li>
</ul>
</body>
</html>

3. 연산

1) 연산

  • 타임리프의 연산은 자바와 크게 다르지 않으나 HTML안에서 사용하기 때문에 HTML 엔터티를 사용하는 부분만 주의하면 됨

(1) BasicController - operation() 추가

@GetMapping("/operation")
public String operation(Model model) {
    model.addAttribute("nullData", null);
    model.addAttribute("data", "Spring!");
    return "basic/operation";
}

 

(2) operation.html

  • 비교연산: HTML 엔터티를 사용하는 부분을 주의, >(gt), <(lt), >=(ge), <=(le), !(not), =(eq), !=(neq, ne)
  • 조건식: 자바의 조건식과 유사함
  • Elvis 연산자(?:): 조건식의 편의 버전, 왼쪽의 피연산자가 null이 아니면 그 값을 반환하고 null이면 오른쪽 값을 반환
  • No-Operation(_): _인경우 마치 타임리프가 실행되지 않는 것 처럼 동작하며 이것을 잘 사용하면 HTML의 내용 그대로 활용할 수 있음, 예제를 보면 HTML의 '데이터가 없습니다' 부분이 그대로 출력됨
<!DOCTYPE html>
<!-- 타임리프 선언 및 head태그 -->

<body>
<ul>
    <li>산술 연산
        <ul>
            <li>10 + 2 = <span th:text="10 + 2"></span></li>
            <li>10 % 2 == 0 = <span th:text="10 % 2 == 0"></span></li>
        </ul>
    </li>
    <!-- HTML 엔티티 사용에 주의 -->
    <!--    `>` (gt), `<` (lt), `>=` (ge), `<=` (le), `!` (not), `==` (eq), `!=` (neq, ne)-->
    <li>비교 연산
        <ul>
            <li>1 > 10 = <span th:text="1 &gt; 10"></span></li>
            <li>1 gt 10 = <span th:text="1 gt 10"></span></li>
            <li>1 >= 10 = <span th:text="1 >= 10"></span></li>
            <li>1 ge 10 = <span th:text="1 ge 10"></span></li>
            <li>1 == 10 = <span th:text="1 == 10"></span></li>
            <li>1 != 10 = <span th:text="1 != 10"></span></li>
        </ul>
    </li>
    <li>조건식
        <ul>
            <li>(10 % 2 == 0)? '짝수':'홀수' = <span th:text="(10 % 2 == 0)? '짝수':'홀수'"></span></li>
        </ul>
    </li>
    <!--    조건식의 편의 버전-->
    <li>Elvis 연산자
        <ul>
            <li>${data}?: '데이터가 없습니다.' = <span th:text="${data}?: '데이터가 없습니다.'"></span></li>
            <li>${nullData}?: '데이터가 없습니다.' = <span th:text="${nullData}?: '데이터가 없습니다.'"></span></li>
        </ul>
    </li>
    <li>No-Operation <!-- No-Operation : 언더바(_)인 경우 해당 줄의 타임리프의 태그효과가 작동하지 않고 HTML태그의 내용이 그대로 들어감 -->
        <ul>
            <li>${data}?: _ = <span th:text="${data}?: _">데이터가 없습니다.</span></li>
            <li>${nullData}?: _ = <span th:text="${nullData}?: _">데이터가 없습니다.</span></li>
        </ul>
    </li>
</ul>
</body>
</html>

4. 속성 값 설정

1) 타임리프 태그 속성

(1) 설명

  • 타임리프는 주로 HTML 태그에 th:* 속성을 지정하는 방식으로 동작함
  • th:*로 속성을 적용하면 기존속성을 대체하거나 기존 속성이 없으면 새로 만듦

(2) BasicController - attribute() 추가

@GetMapping("/attribute")
public String attribute() {
    return "basic/attribute";
}

 

(3-1) attribute.html

<!DOCTYPE html>
<!-- 타임리프 선언 및 head태그 -->

<body>
<h1>속성 설정</h1>

<!--th:name="" 부분이 기존의 name="" 부분을 대체, 기존 속성이 없다면 새로 만듦-->
<input type="text" name="mock" th:name="userA"/>

<h1>속성 추가</h1>
<!--class 앞에 붙힘-->
- th:attrappend = <input type="text" class="text" th:attrappend="class=' large'"/><br/>
<!--class 뒤에 붙힘-->
- th:attrprepend = <input type="text" class="text" th:attrprepend="class='large '"/><br/>
<!--속성이 class인 경우 classappend로 띄어쓰기 없이 자동으로 띄어쓰기를 추가하여 값을 추가-->
- th:classappend = <input type="text" class="text" th:classappend="large"/><br/>

<!-- 기본 HTML에서는 checked=값과는 상관없이 checked만 있으면 무조건 체크박스에 체크가 되어있음
타임리프는 th:checked="true"이면 체크, "false"이면 체크해제가 되어 편리하게 동일 변수로 코딩할 수 있음-->
<!-- - checked o <input type="checkbox" name="active" th:checked="${변수}"/><br/>
이런식으로 자바 코드에서 넘어오는 변수값으로 if문 없이 true, false를 구현할 수 있음 -->
<h1>checked 처리</h1>
- checked o <input type="checkbox" name="active" th:checked="true"/><br/>
- checked x <input type="checkbox" name="active" th:checked="false"/><br/>
- checked=false <input type="checkbox" name="active" checked="false"/><br/>
</body>
</html>

 

(3-2) 속성 설정

  • th:* 속성을 지정하여 기존 속성을 대체
  • <input type="text" name="mock" th:name="userA"/> 가 타임리프 렌더링 후 <input type"text" name="userA" /> 로 변경됨

(3-3) 속성 추가

  • th:attrappend: 속성 값의 뒤에 값을 추가함, class="text" -> class="text large"
  • th:attrprepend: 속성 값의 앞에 값을 추가함, class="text" -> class="large text"
  • th:classappend: class 속성뒤에 자연스럽게 추가함(자동 띄어쓰기 포함됨), class="text" -> class="text large"

(3-4) checked 처리

  • HTML에서는 <input type="checkbox" name="active" checked="false" /> 인 경우에도 checked="값"과는 상관없이 checked속성이 있기 때문에 checked 처리가 되어 버림
  • 즉, HTML에서 checked속성은 값과는 별개로 checked라는 속성만 있어도 checked로 동작하기 때문에 이런 부분은 true, false값을 주로 사용하는 개발자 입장에서는 불편함
  • 타임리프의 th:checked는 값이 false인 경우 checked 속성 자체를 제거함
  • <input type="checkbox" name="active" th:checked="false"/> -> 타임리프 렌더링 후 <input type="checkbox" name"active" />

5. 반복

1) 반복

(1) 설명

  • 타임리프에서의 반복은 th:each를 사용함
  • 추가로 반복에서 사용할 수 있는 여러 상태값을 지원한

(2) BasicController - each() 추가

@GetMapping("/each")
public String each(Model model) {
    addUsers(model);
    return "basic/each";
}

private void addUsers(Model model) {
    List<User> list = new ArrayList<>();
    list.add(new User("UserA", 10));
    list.add(new User("UserB", 20));
    list.add(new User("UserC", 30));

    model.addAttribute("users", list);
}

 

(3-1) BasicController - each() 추가

<!DOCTYPE html>
<!-- 타임리프 선언 및 head태그 -->

<body>
<h1>기본 테이블</h1>
<table border="1">
    <tr>
        <th>username</th>
        <th>age</th>
    </tr>
    <!--    ${user}의 값을 하나씩 꺼내서 user에 담아 태그를 반복 실행
            list 뿐 아니라 Iterable, Enumeration을 구현한 모든 객체를 반복에 사용 가능
            Map도 사용할 수 있으며 변수에 담기는 값은 Map.Entry임-->
    <tr th:each="user : ${users}">
        <td th:text="${user.username}">username</td>
        <td th:text="${user.age}">0</td>
    </tr>
</table>
<h1>반복 상태 유지</h1>
<table border="1">
    <tr>
        <th>count</th>
        <th>username</th>
        <th>age</th>
        <th>etc</th>
    </tr>
    <!--    두번째 파라미터를 설정하여 반복의 상태를 확인하여 다양한 기능을 활용할 수 있음
            두번째 파라미터는 생략 가능한데, 생략하면 첫번째 변수명+Stat이 됨
            코딩시 해당 룰을 활용하면 파라미터를 생략하고 기능을 사용할 수 있음-->
    <tr th:each="user, userStat : ${users}">
        <td th:text="${userStat.count}">username</td>
        <td th:text="${user.username}">username</td>
        <td th:text="${user.age}">0</td>
        <td>
            index = <span th:text="${userStat.index}"></span>
            count = <span th:text="${userStat.count}"></span>
            size = <span th:text="${userStat.size}"></span>
            even? = <span th:text="${userStat.even}"></span>
            odd? = <span th:text="${userStat.odd}"></span>
            first? = <span th:text="${userStat.first}"></span>
            last? = <span th:text="${userStat.last}"></span>
            current = <span th:text="${userStat.current}"></span>
        </td>
    </tr>
</table>
</body>
</html>

 

(3-2) 반복 기능

  • <tr th:each="user : ${users}">
  • 반복시 오른쪽 컬렉션 ${users}의 값을 하나씩 꺼내서 왼쪽 변수 user에 담아서 태그를 반복 실행
  • th:each는 List뿐만 아니라 배열, java.util.Iterable, java.util.Enumeration을 구현한 모든 객체를 반복에 사용할 수 있음
  • Map도 사용할 수 있는데 이 경우 변수에 담기는 값은 Map.Entry임

(3-3) 반복 상태 유지 기능

  • <tr th:each="user, userStat : ${users}">
  • 두번째 파라미터로 반복의 상태를 확인 할 수 있으며, 두번째 파라미터는 생략이 가능한데 생략하면 지정한 변수명 + Stat으로 파라미터를 사용하여 반복의 상태를 확인할 수 있음 (변수명:user + Stat = userStat) 
  • index: 0 부터 시작하는 값
  • count: 1부터 시작하는 값
  • size: 전체 사이즈
  • even, odd: 짝수, 홀수 여부(boolean)
  • first, last: 처음, 마지막 여부(boolean)
  • current: 현재 객체

6. 조건부 평가

1) 타임리프의 조건식

(1) if, unless(if의 반대), switch

  • if, unless: 타임리프는 해당 조건이 맞지 않으면 태그 자체를 렌더링하지 않음, 즉 if 조건식이 false인 경우 <span> ... </span> 부분 자체가 렌더링이 되지 않고 사라짐
  • switch: *은 만족하는 조건이 없을 때 사용하는 디폴트와 동일함

(2) BasicController - condition() 추가

@GetMapping("/condition")
public String condition(Model model) {
    addUsers(model);
    return "basic/condition";
}

 

(3) condition.html

<!DOCTYPE html>
<!-- 타임리프 선언 및 head태그 -->

<body>
<h1>if, unless</h1>
<table border="1">
    <tr>
        <th>count</th>
        <th>username</th>
        <th>age</th>
    </tr>
    <tr th:each="user, userStat : ${users}">
        <td th:text="${userStat.count}">1</td>
        <td th:text="${user.username}">username</td>
        <td>
            <span th:text="${user.age}">0</span>

            <!-- if = user.age < 20가 참이면 미성년자 출력, 거짓이면 span 문장 삭제-->
            <span th:text="'미성년자'" th:if="${user.age lt 20}"></span>

            <!-- unless = user.age > 20 거짓이면 미성년자 출력, 참이면 span 문장 삭제-->
            <span th:text="'미성년자'" th:unless="${user.age ge 20}"></span>
        </td>
    </tr>
</table>
<h1>switch</h1>
<table border="1">
    <tr>
        <th>count</th>
        <th>username</th>
        <th>age</th>
    </tr>
    <tr th:each="user, userStat : ${users}">
        <td th:text="${userStat.count}">1</td>
        <td th:text="${user.username}">username</td>
        <!--        자바 문법과 비슷-->
        <td th:switch="${user.age}">
            <span th:case="10">10살</span>
            <span th:case="20">20살</span>
            <span th:case="*">기타</span>
        </td>
    </tr>
</table>
</body>
</html>

 

'인프런 - 스프링 완전정복 코스 로드맵 > 스프링 MVC 2편 - 백엔드 웹 개발 핵심 기술' 카테고리의 다른 글

메시지 및 국제화, 프로젝트 설정 및 소개, 스프링 메시지 소스 설정, 스프링 메시지 소스 사용, 웹 애플리케이션에 메시지 적용하기, 웹 애플리케이션에 국제화 적용  (3) 2024.09.03
타임리프 - 스프링 통합과 폼, 체크박스 단일, 체크박스 멀티, 라디오 버튼, 셀렉트 박스  (1) 2024.06.16
타임리프 - 스프링 통합과 폼, 프로젝트 설정, 타임리프 스프링 통합, 입력 폼 처리, 요구사항 추가  (0) 2024.05.27
타임리프 - 기본기능, 주석, 블록, 자바스크립트 인라인, 템플릿 조각, 템플릿 레이아웃  (0) 2024.05.19
타임리프 - 기본기능, 프로젝트 생성 및 타임리프소개, 텍스트(text/utext), 변수(SpringEL), 기본 객체들, 유틸리티 객체와 날짜  (0) 2024.05.15
'인프런 - 스프링 완전정복 코스 로드맵/스프링 MVC 2편 - 백엔드 웹 개발 핵심 기술' Related Articles more