MemberForm의 name 변수와 html input 태그 n... - 인프런

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요.

1. 강의 내용과 관련된 질문을 남겨주세요.
2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요.
(자주 하는 질문 링크: https://bit.ly/3fX6ygx)
3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요.
(질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG)

질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요.
=========================================
[질문 템플릿]
1. 강의 내용과 관련된 질문인가요? 예
2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? 다시 잘 확인해보니 질문 게시판에 있었습니다...!!ㅎㅎ...
3. 질문 잘하기 메뉴얼을 읽어보셨나요? 예

[질문 내용]
1) 목표

https://www.inflearn.com/course/lecture?courseSlug=%EC%8A%A4%ED%94%84%EB%A7%81-%EC%9E%85%EB%AC%B8-%EC%8A%A4%ED%94%84%EB%A7%81%EB%B6%80%ED%8A%B8&unitId=49590&tab=curriculum

위의 강의(회원 웹 기능 - 등록)에서 2:47 에서 하신 말씀 - “이렇게 하면 이 name(MemberForm 에서의 name)이랑 createMemberForm.html 에서 form 태그 내부의 input 태그 중 name 속성이 “name” 이었던 것 있죠? 이게 딱 매칭이 되면서 값이 들어올거예요” - 라는 부분을 듣고, 정말 그러한지 한번 확인해보고 싶어서 name = "name" 부분을 name="thisname"으로 바꿔도 매칭이 잘 되면서 값이 들어오는지 확인해보고자 하였습니다.

2) 다음과 같이 코드를 바꿔보았습니다.

MemberForm.java(name -> thisname으로)

package hello.hellospring.controller;

public class MemberForm {
    private String thisname; // 이 name 변수랑 createMemberForm.html 에서 input 태그의 name 속성이 "name" 인거랑 매칭됨(어떻게 그렇게 되는거지??)

    public String getName() {
        return thisname;
    }

    public void setName(String name) {
        this.thisname = name;
    }
}

createMemberForm.html(input name="name"을 name="thisname"으로)

<!doctype html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <form action="/members/new" method="post">
            <div class="form-group">
                <!-- label 태그는 for 속성을 사용해서 input 태그의 id 속성에 연계해서 사용
                     label의 for 값과 input의 id 값을 일치시키면 된다 -->
                <label for="name">이름</label>
                <input type="text" id="name" name="thisname" placeholder="이름을 입력하세요." />
            </div>

            <!-- 그냥 type="submit"로 안하고 button 태그만 해도 form 태그 내부에 있는 것이기 때문에 submit 된다 -->
            <button type="submit">등록</button>
        </form>
    </div>
</body>
</html>

3) 강의에서 "MemberForm에서의 name 변수와 input name="name"이 서로 같은 이름이므로 매칭이 된다" 라고 하셨으므로, name이 아니라 thisname으로 둘다 바꿔주더라도 input에 입력한 값을 잘 받아와서 MemberForm의 thisname 변수에 잘 매칭시켜줄거라 예상했습니다.

하지만 name으로 했을 때는 입력값을 잘 받아왔는데, thisname으로 바꿨을 때는 입력값을 못 받아오는 것을 볼 수 있었습니다.

(+) MemberController.java에서 System.out.println으로 MemberForm의 getName 함수를 호출했을 때도 결과값으로 null을 받아오는 것을 볼 수 있었습니다.

@PostMapping("/members/new")
    public String create(MemberForm form){
        System.out.println("MemberForm thisname is : " + form.getName());
        Member member = new Member();
        member.setName(form.getName());

        memberService.join(member);
        return "redirect:/"; // 다시 home 화면으로 보내
    }

결과 : MemberForm thisname is null

(입력값으로 무언가를 입력했음에도 저렇게 결과가 뜹니다)

4) 질문

말씀하셨던대로라면 MemberForm.java의 thisname과 input name="thisname"이 매칭되어야하는데, 매칭이 안되고 null 값을 가져오는 이유가 궁금합니다. 제가 어디서 잘못한걸까요?

2번 부분에 올린 코드들 외에는 모두 강의랑 똑같이 했다고 생각합니다. 그리고 thisname으로 바꾸기 전에 name으로 했을 때는 문제없이 입력값을 받아와서 잘 매칭시켜주는 것을 볼 수 있었습니다.

인프런 커뮤니티 질문&답변

MemberForm의 name 변수와 html input 태그 name="name" 매칭