[Spring] MVC와 Form Tags 상세하게 공부해보기

배경

MVC와 JSP Form Tags는 Spring 기반 웹을 만드는 과정에서 중요한 역할을 한다. 사실 Form Tag는 일반 웹 프론트엔드 작업을 하는 과정에서도 많이 사용된다. 물론, Typescript기반 React.tx가 요새 인기를 끌고 있긴 하지만 기본적인 Spring을 공부해나가는 과정도 중요하니 한번 살펴보도록 하겠다.

단계별 Spring MVC Form Tag 사용하기

• form tag 라이브러리는spring-webmvc.jar에서 spring-form.tld로 존재한다.

Spring MVC Form Tag 부르기

• Form tag를 사용하기 위해서는 JSP page에서 아래의 코드를 붙여 라이브러리를 불러야 한다.

<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>

Form Tag

• 이 태그는 내부에 같이 묶여있는 다른 Form 태그에 접근할 수 있고 함께 움직이게 된다.
• 예를 들어, User 모델에 firstName과 lastName이 있으면 이를 인식하고 submit 버튼을 누르면 제출이 되는 구조이다.

<form:form>
    <table>
        <tr>
            <td>First Name:</td>
            <td>
                <form:input path="firstName" />
            </td>
        </tr>
        <tr>
            <td>Last Name:</td>
            <td>
                <form:input path="lastName" />
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="submit" value="Save Changes" />
            </td>
        </tr>
    </table>
</form:form>

• 근데 제출을 하고 우리가 성을 부르게 되면 value 값이 정해지게 된다ㅏ.
• 또한, type을 지정할 수 있는데 일단 기본 값은 text이다.

<input name="firstName" type="text" value="김" />

input tag와 비교하기

Form 형식

<form:input path="firstName"/>
<form:input path="lastName"/>

input 형식

<input name="firstName" type="text" value="김"/>
<input name="lastName" type="text" value="진성"/>

• 나는 React로 개발할 때 Form 태그보다는 input이나 div로 나만의 태그를 커스터마이징을 하는 것을 선호하지만 여기서는 inline css가 가능한지는 모르겠지만 제한되어 있는 경우가 있는 것 같다.

checkbox tag도 사용해보기

• User 에게 Preferences가 존재하고 있다고 가정해보자.

public class Preferences {

    private boolean receiveNewsletter;
    private String[] interests;
    private String favouriteWord;

    public boolean isReceiveNewsletter() {
        return receiveNewsletter;
    }

    public void setReceiveNewsletter(boolean receiveNewsletter) {
        this.receiveNewsletter = receiveNewsletter;
    }

    public String[] getInterests() {
        return interests;
    }

    public void setInterests(String[] interests) {
        this.interests = interests;
    }

    public String getFavouriteWord() {
        return favouriteWord;
    }

    public void setFavouriteWord(String favouriteWord) {
        this.favouriteWord = favouriteWord;
    }
}

• 이 때의 form.jsp는 아래와 같다.

<form:form>
    <table>
        <tr>
            <td>Subscribe to newsletter?:</td>
            <%-- Approach 1: Property is of type java.lang.Boolean --%>
                <td>
                    <form:checkbox path="preferences.receiveNewsletter" />
                </td>
        </tr>

        <tr>
            <td>Interests:</td>
            <%-- Approach 2: Property is of an array or of type java.util.Collection --%>
                <td>
                    Quidditch:
                    <form:checkbox path="preferences.interests" value="Quidditch" /> Herbology:
                    <form:checkbox path="preferences.interests" value="Herbology" /> Defence Against the Dark Arts:
                    <form:checkbox path="preferences.interests" value="Defence Against the Dark Arts" />
                </td>
        </tr>

        <tr>
            <td>Favourite Word:</td>
            <%-- Approach 3: Property is of type java.lang.Object --%>
                <td>
                    Magic:
                    <form:checkbox path="preferences.favouriteWord" value="Magic" />
                </td>
        </tr>
    </table>
</form:form>

접근방식

1. java.lang.Boolean의 유형 값으로 묶어 체크했을 경우 true, 반대의 경우 false로 묶어서 사용한다.
2. java.util.Collection으로 묶어서 체크했을 경우 collection에 setValue(Object) 값으로 넣어서 사용한다.
3. checkbox를 사용해 value 값을 묶어서 사용한다.

• 이를 하나로 통일해서 사용하면 아래와 같다.

<tr>
    <td>Interests:</td>
    <td>
        Quidditch: <input name="preferences.interests" type="checkbox" value="Quidditch" />
        <input type="hidden" value="1" name="_preferences.interests" /> Herbology: <input name="preferences.interests" type="checkbox" value="Herbology" />
        <input type="hidden" value="1" name="_preferences.interests" /> Defence Against the Dark Arts: <input name="preferences.interests" type="checkbox" value="Defence Against the Dark Arts" />
        <input type="hidden" value="1" name="_preferences.interests" />
    </td>
</tr>

여러 개의 체크박스를 사용할 때

• input 태그를 사용할 때는 type="checkbox"를 사용하면 된다.

<form:form>
    <table>
        <tr>
            <td>Interests:</td>
            <td>
                <%-- Property is of an array or of type java.util.Collection --%>
                    <form:checkboxes path="preferences.interests" items="${interestList}" />
            </td>
        </tr>
    </table>
</form:form>

radiobutton tag를 사용하기

• input 태그에서는 type="radio"를 사용하면 된다.

<tr>
    <td>Sex:</td>
    <td>
        Male:
        <form:radiobutton path="sex" value="M" /> <br/> Female:
        <form:radiobutton path="sex" value="F" />
    </td>
</tr>

password tag 사용하기

• input 태그에서는 type="password"를 사용하면 된다.
• 비밀번호를 보이게 하려면 showPassword="true"를 사용하고 이외 기본값은 안보인다.

<tr>
    <td>Password:</td>
    <td>
        <form:password path="password" value="^76525bvHGq" showPassword="true" />
    </td>
</tr>

select tag와 option tag 사용하기

<tr>
    <td>Skills:</td>
    <td>
        <select name="skills" multiple="true">
            <option value="Potions">Potions</option>
            <option value="Herbology" selected="selected">Herbology</option>
            <option value="Quidditch">Quidditch</option>
        </select>
    </td>
</tr>

• 이 경우 여러 개를 선택할 경우 option을 통해 지정할 수 있다.

<tr>
    <td>House:</td>
    <td>
        <select name="house">
            <option value="Gryffindor" selected="selected">Gryffindor</option>
            <option value="Hufflepuff">Hufflepuff</option>
            <option value="Ravenclaw">Ravenclaw</option>
            <option value="Slytherin">Slytherin</option>
        </select>
    </td>
</tr>

다중 옵션을 한번에 줄 경우에는 아래와 같이 할 수 있다.

<tr>
    <td>Country:</td>
    <td>
        <form:select path="country">
            <form:option value="-" label="--Please Select" />
            <form:options items="${countryList}" itemValue="code" itemLabel="name" />
        </form:select>
    </td>
</tr>

textarea tag 사용하기

<tr>
    <td>Notes:</td>
    <td>
        <form:textarea path="notes" rows="3" cols="20" />
    </td>
    <td>
        <form:errors path="notes" />
    </td>
</tr>

hidden tag 사용하기

<form:hidden path="house"/>
<input name="house" type="hidden" value="Gryffindor"/>

errors tag 사용하기

• 만약에 User 모델에 UserValidator가 존재할 경우

public class UserValidator implements Validator {

    public boolean supports(Class candidate) {
        return User.class.isAssignableFrom(candidate);
    }

    public void validate(Object obj, Errors errors) {
        ValidationUtils.rejectIfEmptyOrWhitespace(errors, "firstName", "required", "Field is required.");
        ValidationUtils.rejectIfEmptyOrWhitespace(errors, "lastName", "required", "Field is required.");
    }
}

form.jsp 형식

<form method="POST">
    <table>
        <tr>
            <td>First Name:</td>
            <td><input name="firstName" type="text" value="" /></td>
            <%-- Associated errors to firstName field displayed --%>
                <td><span name="firstName.errors">Field is required.</span></td>
        </tr>

        <tr>
            <td>Last Name:</td>
            <td><input name="lastName" type="text" value="" /></td>
            <%-- Associated errors to lastName field displayed --%>
                <td><span name="lastName.errors">Field is required.</span></td>
        </tr>
        <tr>
            <td colspan="3">
                <input type="submit" value="Save Changes" />
            </td>
        </tr>
    </table>
</form>

• path="*" : 모든 에러를 보여준다.
• path="lastName" : lastName과 연관된 모든 에러를 보여준다.
• path가 생략된 경우 : 오로지 object error만 보여준다.

이번에는 Spring에 대한 부분보다 Spring 내 jsp에서 form tag를 사용할 수 있는 다양한 방법에 대하여 정리하였다. 그러나, jsp로 개발하는 곳이 종종 있어서 알아두면 좋을거 같다.