본문 바로가기

SPRING/Spring

[스프링| 스프링 입문 | 코드로 배우는 스프링] 회원 웹 기능 - 조회

// @GetMapping 애노테이션은 이 메서드가 HTTP GET 요청을 처리하며,
// 'members' 경로로 들어오는 요청을 매핑합니다.
@GetMapping("members")
public String list(Model model) { // 'list' 메서드 정의, Model 객체를 파라미터로 받습니다.
                                  // Model 객체는 뷰에 데이터를 전달하는 데 사용됩니다.
    
    // memberService를 사용하여 모든 회원 목록을 조회합니다.
    List<Member> members = memberService.findMembers();
    
    // 조회한 회원 목록을 'members'라는 이름으로 Model에 추가합니다.
    // 이렇게 함으로써 뷰 템플릿에서 'members'를 사용할 수 있게 됩니다.
    model.addAttribute("members", members);
    
    // 뷰의 이름을 반환합니다. 이 경우 'members/memberList' 뷰 템플릿을 사용하도록 지정하고 있습니다.
    // Thymeleaf 등의 템플릿 엔진은 이 이름을 사용하여 실제 페이지를 렌더링합니다.
    return "members/memberList";

}

이 메서드는 'members' 경로로 GET 요청이 들어올 때 호출됩니다. 이 요청은 회원 목록 페이지를 사용자에게 보여주는 역할을 합니다. 서비스 계층을 통해 모든 회원 정보를 가져오고, 이를 모델에 추가하여 뷰에서 사용할 수 있도록 합니다. 반환된 문자열은 뷰 리졸버에 의해 처리되어 사용자에게 최종적인 HTML 페이지로 렌더링됩니다.

 

addAttribute() 메서드

addAttribute 메서드는 Model 인터페이스에 정의되어 있는 메서드로, 스프링 MVC에서 컨트롤러와 뷰 사이의 데이터 전달에 사용됩니다. addAttribute 메서드를 사용하면 컨트롤러에서 생성하거나 받아온 데이터를 뷰에 전달할 수 있습니다.

addAttribute(String attributeName, Object attributeValue) 메서드는 다음과 같은 기능을 수행합니다:

  • attributeName: 뷰에서 사용할 속성의 이름을 지정합니다. 이 이름으로 뷰 템플릿 내에서 데이터에 접근할 수 있습니다.
  • attributeValue: 속성에 할당할 실제 데이터 객체입니다. 이 객체는 뷰 템플릿에서 사용되며, 템플릿 엔진이 이를 렌더링하는 데 사용합니다.

예를 들어, addAttribute("members", members) 코드는 members라는 이름으로 회원 목록을 뷰에 전달합니다. 뷰 템플릿(예: Thymeleaf) 내에서는 ${members}와 같은 표현식을 사용하여 이 데이터에 접근하고, 각 회원의 데이터를 화면에 출력할 수 있습니다. 이 방식은 뷰에 동적으로 데이터를 전달하고 사용자에게 결과를 보여주는 데 매우 효과적입니다.

 

<!DOCTYPE HTML> <!-- HTML5 문서 타입 선언 -->
<html xmlns:th="http://www.thymeleaf.org"> <!-- HTML 시작 태그에 Thymeleaf 네임스페이스를 추가 -->
<body>

<div class="container"> <!-- 컨테이너 클래스를 가진 div 태그, 스타일링을 위해 사용될 수 있음 -->
  <div>
    <table> <!-- 데이터를 표 형식으로 보여주기 위한 table 태그 -->
      <thead> <!-- 테이블의 헤드 영역을 정의 -->
      <tr> <!-- 테이블 행을 생성 -->
        <th>#</th> <!-- 테이블 헤더 셀, 열 제목을 나타냄 -->
        <th>이름</th> <!-- 테이블 헤더 셀, '이름'이라는 열 제목을 나타냄 -->
      </tr>
      </thead>
      <tbody> <!-- 테이블의 본문 영역을 정의 -->
      <!-- Thymeleaf의 반복 처리를 위한 속성. 
           'members' 컬렉션의 각 객체를 'member'라는 지역 변수로 순회하며 테이블 행(tr)을 생성 -->
      <tr th:each="member : ${members}"> 
        <!-- 회원의 ID를 표시하기 위한 테이블 데이터 셀(td).
             'member.id' 표현식의 값을 평가하여 셀의 텍스트로 설정 -->
        <td th:text="${member.id}"></td>
        <!-- 회원의 이름을 표시하기 위한 테이블 데이터 셀(td).
             'member.name' 표현식의 값을 평가하여 셀의 텍스트로 설정 -->
        <td th:text="${member.name}"></td>
      </tr>
      </tbody>
    </table>
  </div>
</div>

</body>
</html>
  • th:each="member : ${members}": 이 속성은 Thymeleaf의 반복 처리 기능을 사용하여 지정된 컬렉션(members)의 각 아이템을 순회하는 데 사용됩니다. 이 예에서는 members 컬렉션의 각 객체에 대해 member라는 지역 변수를 생성하고, 각 객체에 대한 새로운 테이블 행(<tr>)을 만듭니다.
  • th:text="${member.id}" 및 th:text="${member.name}": 이 속성들은 Thymeleaf 표현식을 사용하여 특정 객체의 속성 값을 HTML 요소의 텍스트 콘텐츠로 설정합니다. 여기서는 각 member 객체의 id와 name 속성을 해당하는 <td> 요소에 표시합니다.

Thymeleaf 표현식은 ${...} 구문을 사용하여 모델 속성의 값을 평가하고, 결과를 HTML 마크업에 동적으로 바인딩합니다. 이런 방식으로 서버 사이드에서 데이터를 처리하고 클라이언트 측에 전달하여 사용자 인터페이스를 동적으로 렌더링할 수 있습니다.