[Spring]Spring 시작해보기(6) - Thymeleaf를 사용해 QuestionList 출력

JPA를 통해 Question과 Answer 엔티티를 생성하고, CRUD까지 기능 구현을 해 보았다.

하지만, 이렇게 테이블 내 내용들을 불러오기만 할 뿐 출력시키는 방법은 여전히 구현하지 못했다.

 

나는 ThymeLeaf 라는 View Template를 사용하여 내용들을 출력시킬 것이다.

타임리프(Thymeleaf)란?

참조 : Thymeleaf란?

타임리프(Thymeleaf)란?

나는 지금까지 Question 엔티티의 내용들을 findAll을 사용해 모두 가져올 수 있다.

그 findAll을 사용하여 추출한 값들을 출력시키기 위해 thymeleaf를 사용해 출력시킬 것이다.

 

 

1. Controller 생성

우리는 QuestionController을 사용해 Question과 관련된 URL 매핑을 할 수 있도록 한다.

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class QuestionController {

    @RequestMapping("/question/list")
    @ResponseBody
    public String list() {
        return "question list";
    }
}

“localhost:8080/question/list” 에 들어가면 오류메시지는 출력되겠지만, 나타나긴 할 것이다.

 

 

2. dependency 설정하기

thymeleaf를 사용하기 위해 의존성 주입을 해야한다.

implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect'

이 2가지 의존성을 주입하는데,

첫번째 줄은 thymeleaf를 사용하기 위한 것이고,

두번째 줄은 Layout을 구성할 수 있도록 한다.

 

 

3. Template 만들기

src/main/resource/templates 에 question_list 라는 html파일을 만들어 준다. 이름을 만들 때 주의해야 하는데, controller의 return값에 들어가는 문자열이 html파일의 이름으로 인식해 출력시켜주기 때문이다.

// src/main/resource/templates/question_list
<h2>Hello Template</h2>

 

그러므로 controller의 반환되는 값도 변경되어야 하는데,

“question list” → “question_list”가 되어야 한다.

 

++ 여기서 ResponseBody는 return되는 문자열 그대로 출력하니 template을 가져오기 위해 제거해주어야 한다.

private final QuestionRepository questionRepository;

@RequestMapping("/question/list")
public String list(Model model) {
    List<Question> questionList = questionRepository.findAll();

    // 실행될 question_list.html에서
    model.addAttribute("questionList", questionList);

    return "question_list";
}

이렇게 하면

만 출력 될 것이다.

 

하지만 우리는 findAll을 사용해 가져온 내용들을 출력시켜주어야 하지 않나?

이 때 우리는 thymeleaf를 드디어 사용한다.

 

우리는 앞서 Thymeleaf 에서 설명했듯이 Model객체를 사용해 템플릿에 전달하는데,

model.addAttribute를 통해 findAll로 찾은 Question객체 List를 questionList라는 이름으로 사용한다.

 

++ Tip

클래스에 @RequiredArgsConstructor 어노테이션을 달면, 변수로 설정한 객체에 final을 추가하면 자동으로 객체를 주입할 수 있는 방법인 @AutoWired와 같은 기능을 하게 한다.

 

 

4. Thymeleaf 사용

Controller에서 보내준 questionList를 사용해 출력을 시켜야 한다.

th:속성에 대해서는 또한번 Thymeleaf 를 참조하길 바란다.

<table>
    <thead>
        <tr>
            <th>제목</th>
            <th>작성일시</th>
        </tr>
    </thead>
    <tbody>
        <tr th:each="question : ${questionList}">
            <td th:text="${question.subject}"></td>
            <td th:text="${question.createDate}"></td>
        </tr>
    </tbody>
</table>

thymeleaf를 사용해 각 Question에 대한 subject, createDate를 출력시켰다.

 

출력은 잘 된다.