thymeleaf 사용시 타입값에 대한 equals 사용하기

kihoo_ni·2024년 6월 24일

북스토어프로젝트

목록 보기
7/14
 <form th:action="@{/coupons/users}" method="get" class="mb-4">
        <div class="form-row">
            <div class="col-md-4">
                <input type="text" class="form-control" name="userEmail" placeholder="Search by User Email" th:value="${param.userEmail}">
            </div>
            <div class="col-md-4">
                <select class="form-control" name="type">
                    <option value="" >All Types</option>
                    <option value="welcome" th:selected="${param.type != null and param.type == 'welcome'}">Welcome</option>
                    <option value="birthday" th:selected="${param.type != null and param.type == 'birthday'}">Birthday</option>
                    <option value="book" th:selected="${param.type != null and param.type == 'book'}">Book</option>
                    <option value="category" th:selected="${param.type != null and param.type == 'category'}">Category</option>
                    <option value="sale" th:selected="${param.type != null and param.type == 'sale'}">Sale</option>

                </select>
            </div>
            <div class="col-md-4">
                <button type="submit" class="btn btn-primary">Search</button>
            </div>
            <div th:text="${param.type}">Type will be displayed here</div>

        </div>
    </form>

쿠폰목록 검색기능을 구현중에 thymeleaf를 사용하던중 계속 값을 받지 못하는 문제가 발생하였다. 
어떤 문제냐 하면 검색을하면 검색옵션을 파라미터로 받아서 th:selected 기능을 이용하여 실제 선택되게끔 하려는 찰나에 자꾸 값을 받지못하여 default 값인 Alltype으로만 나오는 문제였다. 
위 처럼 단순히 파라미터로 온값을 동등연산자로 비교하면 값이 제대로 나오지 못한다.
실제로 값을 못받는 것은 아니고  type will be displayed here라고 적힌 곳에 실제 값(param.type)을 받아오기는 한다. 

이 문제를 해결하려면 해당 param의 type이 어떤유형의 데이터타입인지 체크하고 equals로 원하는 값인지 확인하면 해결된다.

    <form th:action="@{/coupons/users}" method="get" class="mb-4">
        <div class="form-row">
            <div class="col-md-4">
                <input type="text" class="form-control" name="userEmail" placeholder="Search by User Email" th:value="${param.userEmail}">
            </div>
            <div class="col-md-4">
                <select class="form-control" name="type">
                    <option value="" >All Types</option>
                    <option value="welcome" th:selected="${#strings.equals(param.type, 'welcome')}">Welcome</option>
                    <option value="birthday" th:selected="${#strings.equals(param.type, 'birthday')}">Birthday</option>
                    <option value="book" th:selected="${#strings.equals(param.type, 'book')}">Book</option>
                    <option value="category" th:selected="${#strings.equals(param.type, 'category')}">Category</option>
                    <option value="sale" th:selected="${#strings.equals(param.type, 'sale')}">Sale</option>
                </select>
            </div>
            <div class="col-md-4">
                <button type="submit" class="btn btn-primary">Search</button>
            </div>
            <div th:text="${param.type}">Type will be displayed here</div>

        </div>
    </form>

위처럼 #strings.equals를 사용하면 값을 가져온다 


보이는 것처럼 search 버튼을 누르면 해당 검색옵션값과, 검색내용을 가져오는것을 확인 할 수 있다.

0개의 댓글