타임리프 - 변수

신창호·2022년 11월 23일

Thymeleaf variable 개인프로젝트

thymeleaf

목록 보기

2/4

변수 SpringEL

타임리프에서 변수를 사용할 때는 변수 표현식을 사용한다.
변수 표현식이란, ${변수명} 을 말한다.
이 변수 표현식에는 스프링 EL이라는 스프링이 제공하는 표현식을 사용할 수 있다.
이번에는 객체를 만들어서 Object,List, Map 테스트해보자

예시

User는 필드값으로 username과 age를 가지고 있는 Object이다.

static class User {
    private String username;
    private int age;
}

Controller 예시

public class BasicController {

    @GetMapping("variable")
    public String variable(Model model) {
        
        // Object 하나
        User userA = new User("userA", 10);
        User userB = new User("userB", 20);

        // List
        List<User> list = new ArrayList<>();
        list.add(userA);
        list.add(userB);

        // Map
        HashMap<String, User> map = new HashMap<>();
        map.put("userA", userA);
        map.put("userB", userB);

        // 3가지 전부 추가
        model.addAttribute("user", userA);
        model.addAttribute("users", list);
        model.addAttribute("userMap", map);
        return "basic/variable";
    }
}

html 예시

Object

<body>
    <h1>SpringEL 표현식</h1>
    <ul>Object
        <li>${user.username} = <span th:text="${user.username}"></span></li>
        <li>${user['username']} = <span th:text="${user['username']}"></span></li>
        <li>${user.getUsername()} = <span th:text="${user.getUsername()}"></span></li>
    </ul>
</body>

프로퍼티 접근방식으로 처리됨을 알 수 있다.
- 프로퍼티란? 키(key)와 값(value)으로 구성된 형태를 말하며, 위에서 키(key)는 username이며, 값(value)은 userA이다.

List 와 Map

List의 경우 인덱스랑 같이 표기하면 되고, Map의 경우 키값이랑 표기하면된다.

<body>
    <ul>List
        <li>${users[0].username} = <span th:text="${users[0].username}"></span></li>
        <li>${users[0]['username']} = <span th:text="${users[0]['username']}"></span></li>
        <li>${users[0].getUsername()} = <span th:text="${users[0].getUsername()}"></span></li>
    </ul>
    <ul>Map
        <li>${userMap['userA'].username} = <span th:text="${userMap['userA'].username}"></span></li>
        <li>${userMap['userA']['username']} = <span th:text="${userMap['userA']['username']}"></span></li>
        <li>${userMap['userA'].getUsername()} = <span th:text="${userMap['userA'].getUsername()}"></span></li>
    </ul>
</body>

지역변수

th:with 를 사용하면 지역 변수를 선언해서 사용할 수 있다.
지역변수답게 선언한 태그안에서만 사용할 수 있다.

예시

지역변수 좋은 예시 html

th:with ="변수면 = ${초기화해줄 값}" 으로 지역변수를 만들어준다.

<body>
    <h1>지역변수 th:with</h1>
    <div th:with="first=${users[0]}">
        <p>지역변수 테스트 첫번째 user는? <span th:text="${first.username}"></span></p>
    </div>
</body>

결과 잘 출력됨을 알 수 있다.

지역변수 안되는 예시 html

지역변수를 사용하는 위치가 선언했던 <div>태그 밖에서 사용해봤다.

<body>
    <h1>지역변수 th:with</h1>
    <div th:with="first=${users[0]}">
    </div>
    <p>지역변수 테스트 첫번째 user는? <span th:text="${first.username}"></span></p>
</body>