[Thymeleaf] 메시지 적용하기

 

    <form action="item.html" th:action th:object="${item}" method="post">
        <div>
            <label for="itemName">상품명</label>
            <input type="text" th:field="*{itemName}" class="form-control" placeholder="이름을 입력하세요">
        </div>
        <div>
            <label for="price">가격</label>
            <input type="text" th:field="*{price}" class="form-control" placeholder="가격을 입력하세요">
        </div>
        <div>
            <label for="quantity">수량</label>
            <input type="text" th:field="*{quantity}" class="form-control" placeholder="수량을 입력하세요">
        </div>
    </form>

아래의 HTML 코드를 보면 <label> 상품명 </label> 또는 가격, 수량으로 각 구분자<div>의 표시되는 이름들이 하드코딩 되어있습니다.

지금이야 간단한 HTML 이라서 상관은 없겠지만, 만약 여러 HTML에 동일하게 적용되어있는 상품명, 가격, 수량의 이름이 변경되어야 한다면 어떨까요?
일일히 HTML을 다 들어가서 하나씩 지우고 수정하고 해야 할 것입니다.

 

이러한 번거로움 작업을 메시지 기능을 통해 관리하는 방법을 알아봅시다.

---

메시지 기능 적용하기

먼저 messages.properties 라는 메시지 관리용 프로퍼티 파일을 만들어 줍니다.

그리고 key , value 형식으로 값을 입력합니다. ( {0}, {1} ... 등 파라미터도 적용 가능)

item=상품
item.id=상품 ID
item.itemName=상품명
item.price=가격
item.quantity=수량
hello.name=안녕 {0}

 

이제 messages.properties에 입력한 값을 이용해, 필요한 HTML에서 타임리프의 메시지 표현식 #{...}을 사용해 이름을 조회해 올 수 있습니다.

th:text="#{item.itemName}"

 

메시지 표현식을 통해 변경한 HTML은 다음과 같습니다.

    <form action="item.html" th:action th:object="${item}" method="post">
        <div>
            <label for="itemName" th:text="#{label.item.itemName}">상품명</label>
            <input type="text" th:field="*{itemName}" class="form-control" placeholder="이름을 입력하세요">
        </div>
        <div>
            <label for="price" th:text="#{label.item.price}">가격</label>
            <input type="text" th:field="*{price}" class="form-control" placeholder="가격을 입력하세요">
        </div>
        <div>
            <label for="quantity" th:text="#{label.item.quantity}">수량</label>
            <input type="text" th:field="*{quantity}" class="form-control" placeholder="수량을 입력하세요">
        </div>
    </form>

 

hello.name에 파라미터를 사용하고 싶다면 다음과 같이 사용할 수 있습니다.

th:text="#{hello.name(${item.itemName})}"

 

이제 이름에 변경이 필요하다면 messages.properties 파일에서 변경이 필요한 곳을 변경하면

해당 값을 #{...}로 사용하고 있는 곳들이 변경한 값으로 다 변경 됩니다.