[Spring Boot | Thymeleaf] Form 데이터 전송받기

[Spring Boot | Thymeleaf] Form 데이터 전송받기

웹 페이지에서 서버로 데이터를 전송하고, 서버는 전송받은 데이터를 가공하여 저장하거나 처리하는 등의 작업을 수행합니다. 이번 글에서는 html 페이지의 Form 태그를 사용해서 서버로 데이터를 전송하고, 데이터를 전송받은 서버는 다시 html 페이지로 데이터를 내보내는 작업을 해보면서 클라이언트와 서버 간의 동작을 살펴보겠습니다.

 

Index

1. Controller get, post 두 개의 메서드 구현

2. html form tag

 

반응형

 

 

1. Controller get, post 두 개의 메서드 구현

Controller에서는 get, post 두 개의 방식의 메서드를 구현합니다.

 

@RequestMapping 어노테이션의 속성으로 value와 method를 세팅해서

get, post 방식을 구분해 동작하도록 할 수 있습니다.

 

value는 요청을 받는 url의 값, method는 요청 방식을 세팅할 수 있습니다.

 

다음 Get방식의 메서드를 보겠습니다.

@RequestMapping(value = "/form1", method = RequestMethod.GET)
public String form1(Model model) {
	return "form1";
}

다음 Post방식의 메서드를 보겠습니다.

@RequestMapping(value = "/form1", method = RequestMethod.POST)
public String form2(Model model, @RequestParam("data1") String data1) {
    model.addAttribute("data1", data1);
    return "form1";
}

두 메서드의 차이를 보면 어노테이션 속성 method가 다르고, 메서드의 파라미터가 다른 것을 확인할 수 있습니다.

 

GET 방식 요청의 경우, 일반적으로 데이터를 얻거나, 단순 페이지를 띄울 때 주로 사용됩니다.

POST 방식 요청의 경우 일반적으로 데이터를 서버에 전송할 때(등록할 때) 사용됩니다.

 

 

 

 

2. html form tag

1) html 태그에 thymeleaf 사용을 위해 확장 속성을 추가합니다. xmlns:th="http://www.thymeleaf.org"

2) form 태그, action 속성, method 설정

 

다음 GET 방식의 요청에서 다음과 같은 페이지를 확인할 수 있습니다. GET방식으로 처리하는 메서드를 보면 데이터를 넘겨주는 것이 없기 때문에 html 페이지에서 ${data1}로 표기되었던 값이 null로만 표기되는 것을 확인할 수 있습니다.

 

 

 

POST 방식의 메서드를 다시 보면,

@RequestParam("data1") String data1 이라는 파라미터가 설정되어 있는데,

@RequestParam에 세팅된 data1 이라는 이름의 데이터가 전송되면,

메서드 파라미터 String data1 로 값이 들어오게 됩니다.

 

html에서 form 태그를 사용할 경우, form 태그 내부에 선언된 input 태그의 name 속성 이름이 @RequestParam에 세팅된 이름의 값으로 데이터가 전송됩니다.

 

html 페이지의 input 태그를 보면 name="data1"라고 되어 있는 부분을 확인할 수 있습니다.

 

 

 

 

 

그 값을 model에 data1라는 이름으로 심어서 다시 클라이언트로 보내게 됩니다. get방식과 마찬가지로 같은 페이지를 보이도록 하고 있는데, 이 메서드를 통해 표현된 form1.html 페이지에는 data1이라는 값을 전달 받게 되어 ${data1} 부분에 데이터가 표현되는 것을 확인할 수 있게 됩니다.

 

 

form, input 태그 활용에 대해 알아보았습니다.

 

---

도움이 되는 글 남기겠습니다.

좋아요, 구독, 광고 클릭은 큰 힘이 됩니다 :)