25. [springboot] Thymeleaf select option에 관하여

1. 서론

- 타임리프를 활용하여 앱을 작성하다가 select option에 대해 한번 정리할 필요성을 느꼈습니다.

- 이 글을 읽는다면 controller에서 html로 정보가 이동하는 방법, html에서 select 한 정보가 controller 로 이동되는 방법을 알 수 있게 됩니다.

- 이 글을 읽고 저처럼 더이상 삽질하지 않기를 바라는 마음에서 작성합니다.

2. 본론

저는 평소 entity를 dto로 변환해서 html에 뿌리는 방식을 사용합니다.

 

2.1 controller 에서 web으로 내려주기

dto

@Getter @Setter @Builder
@NoArgsConstructor
@AllArgsConstructor
public class FirstPageDto {

    private String password;    // 비밀번호
    private String applyInfoGubun;    // 지원 정보 구분
    private String applyNumber;      // 지원 번호

    public static FirstPageDto toDto(FirstPage findUser) {
        return FirstPageDto.builder()
                .applyInfoGubun(findUser.getApplyInfoGubun())
                .applyNumber(findUser.getApplyNumber())
                .build();
    }
}

@Getter @Setter
@NoArgsConstructor
@AllArgsConstructor
public class JobInfoDto {
    private String recruitName; // 신입, 경력, 수시채용, 등 관리자페이지에서 커스터마이징 가능하도록 구현
}

controller

    @GetMapping("/")
    public String home(Model model){
        loggger.info("=== [start] home(Model model) ===");

        model.addAttribute("dto",new FirstPageDto());
        loggger.info("=== [jobInfoService.findAll()] ===");
        List<JobInfo> list = jobInfoService.findAll();
        model.addAttribute("gubun",list);

        loggger.info("=== [  end] home(Model model) ===");
        return "first_page";
    }

두개의 dto를 넣었는데, gubun이 select option에 들어가게 될 내용입니다.

 

<select class="select_type01 w170" th:name="test">
	<option value="선택"> 선택 </option>
	<option th:each="val : ${gubun}"
			th:value="${val?.recruitName}"
			th:utext="${val?.recruitName}"></option>
</select>

약간 이중포문 같은 형태로 들어가는 것을 볼 수 있습니다. 여기서 주의해서 볼 부분은 option 부분입니다. 저렇게 적어주면 됩니다.

문법은 위와 같이 작성해줍니다.

 

2.2 web 에서 controller로 올려주기

<select class="select_type01 w170" th:name="test">
	<option value="선택"> 선택 </option>
	<option th:each="val : ${gubun}"
			th:value="${val?.recruitName}"
			th:utext="${val?.recruitName}"></option>
</select>

여기서 주의해서 볼 부분은 select 부분입니다. th:name에 주목합시다. test라는 값이 option에서 선택된 값의 키값으로 반영됩니다.

    public String permit_first_page(HttpServletRequest request, FirstPageDto firstPageDto,@RequestParam String test){
        System.out.println("test = " + test);	// select 값
        ...
    }

@RequestParam으로 받아와 집니다. 그럼 선택된 정보가 web에서 controller로 이동하게 됩니다.

 

2.3 또 다른 예제

- 결혼 유무를 물어보는 선택창이었는데요, html을 이런식으로 구성하였습니다.

<select th:field="${user.isMarried}" th:value="${user.isMarried}">
	<option th:value="'S'" selected>선택</option>
	<option th:value="'Y'" th:text="기혼"></option>
	<option th:value="'N'" th:text="미혼"></option>
</select>

다른 페이지를 갔다 와도 기존에 저장한 값이 선택되어있게 됩니다.

3. 결론

select option 에 대해 명확하게 thymeleaf에서 설명한 부분을 못찾아서 직접 작성해보았습니다.