inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

스프링 MVC 2편 - 백엔드 웹 개발 활용 기술

라디오 버튼

th:field에 대해서

107

냐암2

작성한 질문수 10

0


[질문 템플릿]
1. 강의 내용과 관련된 질문인가요? (예/아니오)
2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오)
3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오)

[질문 내용]
여기에 질문 내용을 남겨주세요.

안녕하세요

  <!-- radio button -->
    <div>
        <div>상품 종류</div>
        <div th:each="type : ${itemTypes}" class="form-check form-check-inline">
            <input type="radio" th:field="${item.itemType}" th:value="${type.name()}" class="form-check-input" disabled>
            <label th:for="${#ids.prev('itemType')}" th:text="${type.description}" class="form-check-label">
                BOOK
            </label>
        </div>
    </div>
<!-- radio button -->
    <div>
        <div>상품 종류</div>
        <div th:each="type : ${itemTypes}" class="form-check form-check-inline">
            <input type="radio" th:field="${type}" th:value="${type.name()}" class="form-check-input" disabled>
            <label th:for="${#ids.prev('type')}" th:text="${type.description}" class="form-check-label">
                BOOK
            </label>
        </div>
    </div>

첫 번째 코드는 원래 코드이고 두번째 코드는 제가 살짝 수정한 코드입니다.

 

th:field="${type}"
"${#ids.prev('type')}"

위의 두 부분을 원래 item.itemType->type

'itemType'->type

으로 수정해주었습니다.

 

item.itemType이 가르키는 것과 type이 가르키는 것이 같으므로 같다고 생각했습니다.

제가 수정한 코드는 왜 틀린것인가요?

 

 

spring mvc

답변 2

0

김영한

안녕하세요. 냐암2님

item.itemType과 itemTypes의 type은 서로 다른 대상입니다.

다음 코드를 참고해주세요.

 

itemTypes

@ModelAttribute("itemTypes")
public ItemType[] itemTypes() {
    return ItemType.values();
}

 

item.itemType (model.addAttribute를 사용해서 바인딩되는 item 인스턴스)

@GetMapping("/{itemId}")
public String item(@PathVariable long itemId, Model model) {
    Item item = itemRepository.findById(itemId);
    model.addAttribute("item", item);
    return "form/item";
}

감사합니다.

1

냐암2

감사합니다!

0

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 냐암2님.

질문해 주신 사항에서 핵심은 th:fieldth:value의 바인딩에 있으며 이들이 어떻게 참여하는지입니다. th:field는 일반적으로 객체의 필드 값과 데이터를 연결하고, 이를 바탕으로 폼을 제출할 때 서버로 값을 전송합니다.

  1. th:fieldth:value 개념: th:field는 주어진 객체의 필드를 입력 요소와 연결하여 바인딩합니다. 예를 들어 th:field="*{itemType}"는 객체에서 itemType 필드를 찾게됩니다. 이는 버튼이 선택되었을 때 설정된 값을 서버로 보낼 수 있도록 해주는 역할을 합니다. th:value는 해당 라디오 버튼의 값을 결정합니다. 즉, 이 두 속성이 같을 때 해당 라디오 버튼에 checked가 추가됩니다.

  2. 비교 표현식의 차이:

    • th:field="${item.itemType}": 이는 item이라는 객체의 itemType 필드를 바인딩합니다. 주로 폼의에서 바인딩한 객체나 모델에 기반하여 사용됩니다.
    • th:field="${type}": type은 입실론에서 이터레이션에 사용한 변수이며, 이는 객체의 필드가 아닌 단지 변수로 사용되므로 바인딩의 대상이 다릅니다.
  3. th:for 관점:

    • th:for="${#ids.prev('itemType')}"는 이전 객체의 필드에 대한 ID를 생성하는 방식입니다. 객체와 연결된 ID를 적절하게 사용해야만 합니다.

추천드리는 수정사항은 아래와 같이 item.itemType을 바인딩하는 원래 형태를 유지하는 것입니다. 직접적인 데이터 객체의 필드와 연결될 수 있도록 구성하는 것에 유의해 주세요.

자세한 작동 원리나 타임리프 템플릿 엔진의 동작 방식에 대해 궁금하시다면 아래의 링크들에서 유사한 질문들을 확인하시기 바랍니다:

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

이미지 업로드와 db 트랜잭션 묶는법

0

42

1

Could not resolve org.springframework.boot:spring-boot-starter-validation:2.4.4

0

52

2

MessageSourceTest 코드

0

47

1

인터셉터 에러 설정

0

48

1

resolveArgument()메서드 질문

0

56

1

43강 검증1 에서 실패 로직 관련 질문있습니다.

0

54

2

타임리프 3.X 버전 rendering, serializer 에러 해결 방법

2

133

3

스프링 빈에 등록이 안되는거 같은데 어떻게 하면 좋을까요?ㅠㅠ

0

89

3

pdf 오타 문의

0

57

1

ItemUpdateForm 검증 관련 질문입니다.

0

48

1

22page 링크 주소 변경

0

59

2

특정 데이터와 파일을 함께 저장 시, 테이블 구조 질문

0

53

1

섹션3번 수업에 대한 질문입니다.

0

80

2

@Autowired 보다 더 좋은 방법이 어떤 걸까요?

0

85

2

타입컨버터 가 람다랑 비슷해 보이는데 저의 생각이 맞는지?.

0

65

1

자바스크립트 인라인에서 객체 직렬화 시 오류가 납니다

0

142

3

스프링부트 - 오류페이지2 에서 500.html 에서 쓰인 객체 질문

0

63

1

톰캣 에러 페이지가 안보입니다.

0

100

2

apiEceptionController에서 센드 에러 호출하면 안되는지?

0

81

1

세션 타임아웃시 쿠키 삭제 방법이 없나요?

0

118

2

ApiExceptionController 질문드립니다.

0

64

1

셀렉박스 챕터에서 option value에 ==배송 방식 선택== 이것을 넣은 이유가 궁금함, 이렇게 구상해도 되는지?

0

66

1

MemberRepository 필드의 fianl 선언 유무

0

85

2

혹시 index.html 에서는 fragment 사용이 안되는건가요

0

58

1