반응형
요새 다니고 있는 부트캠프에서 사이드 프로젝트를 진행하고 있습니다.
게시판을 Spring boot를 활용해서 만들고 있는데, Thymeleaf를 처음 사용하다 보니 아래 문제가 발생했습니다.
문제
글을 수정하기 위해 기존 글을 form에 불러올 때, 기존 글이 form의 input의 값에 넣어지지 않는 문제가 발생했습니다.
아래 보드를 수정하는 메소드(`editBoard`)로 예시를 들어보겠습니다.
// Controller.java
@PostMapping("/board/edit/{board_id}")
public String editBoard(
@PathVariable(name="board_id") Integer boardId,
@ModelAttribute("board") EditBoardDTO editBoardDTO,
Model model
) {
Board findBoard = boardService.getBoardById(boardId);
model.addAttribute("originBoard", findBoard);
return "board/form";
}아래는 위 콘트롤러에서 사용한 Thymeleaf 템플릿입니다.
<!-- board/form.html -->
<form th:action method="post" th:object="${board}" enctype="multipart/form-data">
<label class="form-label" for="title">글 제목</label>
<input class="form-control" id="title"
th:field="*{title}"
th:errorclass="field-error"
placeholder="제목을 입력하세요."
th:value="${originBoard?.title}">
<div class="text-danger" th:errors="*{title}">제목 검증 오류</div>
<!-- 이하생략... -->
</form>구글링과 공식 문서를 통해 문제를 알아보니,
- `th:field`는 컨텍스트 변수를 사용하여 `th:object`와 매핑하여 자동으로 값을 채우는 데 사용됩니다.
- `th:field`는 `value`, `id`, `name` 태그를 필드에 맞게 변경시킵니다.
라는 정보를 알아냈습니다.
즉, 위 문제는 `th:field`와 `th:value`를 같이 사용하다 보니 `th:field`가 value를 변경시키기 때문에 사전에 `th:value`에 입력한 값이 `th:field`에 의해 덮어씌워진 것입니다. 그래서 `th:value`가 제대로 동작하지 않았던 것입니다.
이 문제를 해결하기 위해서는 다음과 같은 해결 방법을 사용해야 했습니다.
해결 방법
`th:field`는 value, id and name 태그를 변경시키기 때문에, id와 name을 수동으로 설정해주었습니다.
`th:field`를 제거한 후, `th:id`와 `th:name`을 `th:field`의 값으로 변경시켜주었습니다.
<!-- board/form.html -->
<form th:action method="post" th:object="${board}" enctype="multipart/form-data">
<label class="form-label" for="title">글 제목</label>
<input class="form-control" id="title"
<!-- 변경된 부분 -->
th:id="title" th:name="title"
th:errorclass="field-error"
placeholder="제목을 입력하세요."
th:value="${originBoard?.title}">
<div class="text-danger" th:errors="*{title}">제목 검증 오류</div>
<!-- 이하생략... -->
</form>참고 링크
'Develop > Issue' 카테고리의 다른 글
| [intellij] 윈도우 환경에서 x-windows-949 관련 에러가 발생할 때 해결법 (0) | 2023.07.21 |
|---|
