inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

체크 박스 - 단일2

th:field="*{open}"질문

73

이진형

작성한 질문수 4

0

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

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

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

[질문 내용]

랜더링전<input type="checkbox"  th:field="*{open}" class="form-check-input"/>

랜더링후

<input type="checkbox" class="form-check-input" id="open" name="open" value="*{open}"/>

 

th:field를 사용하여 강의에서 배운대로 위와 같은 랜더링 결과를 기대했으나

실제 랜더링된 페이지 코드를 보니 아래와 같이 id="open"이 아닌 id="open1"이 적용되었습니다.

<div>판매 여부</div> 

<div> 

<div class="form-check"> 

    <input type="checkbox" class="form-check-input" id="open1" name="open" value="true"/>

    <input type="hidden" name="_open" value="on"/> 

    <label for="open" class="form-check-label">판매 오픈</label> 

</div> 

</div>

그럼 label의 for과 input의 id를 맞추기 위해서 저런 경우 th:field를 사용한다고 해도 id를 작성해야 하나요??

아니면 다른 방법이 있을까요?

 

긴 글 읽어주셔서 감사합니다.

 

spring mvc

답변 1

0

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 이진형님.

th:field를 사용했을 때, checkbox의 id가 예상과 다르게 “open1”으로 나오는 이유에 대해 궁금하시군요. 타임리프에서는 여러 개의 checkbox가 있을 경우 id 중복을 피하기 위해 자동으로 숫자를 붙여 구분합니다. 이때문에 “open1” 같은 id가 생성되는 것이죠.

checkbox의 경우(예: “open”) 중복이 많이 발생할 수 있습니다. 타임리프는 이런 중복을 피하기 위해 자동으로 id에 숫자를 추가합니다. 만약 특정 시점에 for 속성에서 해당 id를 사용할 경우, 명시적으로 id를 지정하여(for=“open1”) 타임리프의 자동 숫자 부여를 피할 수 있습니다. 그러나 이는 추천되지 않는 방법이므로, 타임리프 기능을 최대한 활용하는 것이 좋습니다.

관련 내용을 다룬 질문과 답변들을 공유드립니다:

  1. th:field의 id 부여 질문

    • checkbox의 다수 사용 시, 타임리프가 id를 자동으로 붙이는 것에 대한 설명이 있습니다.
  2. th:field=&quot;{open}&quot; 시 id값이랑 name값이 다르게되네요.

    • 타임리프에서 id와 name이 다르게 설정되는 현상에 대한 더 자세한 설명을 보실 수 있습니다.

타임리프를 사용할 때, 자동으로 생성되는 id를 활용하는 것이 HTML에서 id 중복 문제를 피하고, 코드의 유지보수를 더 용이하게 합니다.

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

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

0

43

1

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

0

53

2

MessageSourceTest 코드

0

47

1

인터셉터 에러 설정

0

48

1

resolveArgument()메서드 질문

0

57

1

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

0

57

2

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

2

133

3

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

0

90

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

103

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