🧠 Django ModelForm에서 위젯 설정 완전 이해하기 (widgets, form-control)

🧠 Django ModelForm에서 위젯 설정 완전 이해하기 (widgets, form-control)

---

🎯 목표

• Django ModelForm에서 widgets 속성을 사용해 어떻게 Bootstrap 스타일을 입히는지 완전히 이해합니다.
• CommentForm 안에서 쓰인 forms.TextInput(attrs={...})의 의미를 세부적으로 분해합니다.

---

✅ 전체 코드 구조 (기본)

class CommentForm(forms.ModelForm):
    class Meta:
        model = Comment
        fields = ('content',)
        widgets = {
            'content': forms.TextInput(attrs={'class': 'form-control'})
        }
        labels = {
            'content': '댓글'
        }

---

🧩 각 줄 설명

1️⃣ class CommentForm(forms.ModelForm):

• Django에 "이건 Comment 모델에 연결된 Form이야"라고 알려줌
• 즉, 댓글 입력 폼을 자동 생성하기 위한 클래스

2️⃣ class Meta:

• 폼이 어떤 모델을 기반으로 할지, 어떤 필드를 보여줄지, 스타일은 어떻게 할지를 지정하는 공간

3️⃣ model = Comment

• 이 폼이 Comment 모델과 연결되어 있다는 의미

4️⃣ fields = ('content',)

• Comment 모델 중 'content' 필드만 이 폼에서 입력받겠다는 뜻
• author, blog는 폼에서 제외됨 (자동으로 처리되거나 숨김 처리)

5️⃣ widgets = { ... }

'content': forms.TextInput(attrs={'class': 'form-control'})

• <input> 박스를 만들되, class="form-control"이라는 Bootstrap 스타일을 적용
• attrs={...}는 HTML 속성을 직접 지정하는 방법 (여기선 class)
• 결과적으로 예쁜 input 창으로 자동 변환됨

6️⃣ labels = { 'content': '댓글' }

• 템플릿에서 보일 라벨 이름을 '댓글'로 지정 (기본값: Content)

---

🧪 최종 HTML 결과 예시

이렇게 설정하면 최종적으로 렌더링되는 HTML은:

<label for="id_content">댓글</label>
<input type="text" name="content" class="form-control" id="id_content">

✅ 즉, Bootstrap 스타일이 적용된 깔끔한 입력창이 자동으로 나옵니다!

---

❓ 왜 이렇게 설정해야 하나요?

방법 결과 단점

아무 설정 안 함	<input>만 나옴	투박하고 스타일 없음
form-control 적용	예쁜 Bootstrap UI 적용	class를 일일이 지정해야 함

✅ 그래서 widgets로 class를 자동 지정하는 것이 실무에서 가장 깔끔한 방식입니다.

---

✅ 요약 정리

항목 설명

'content'	적용할 필드 이름
forms.TextInput(...)	텍스트 입력창 위젯 지정
attrs={'class': 'form-control'}	HTML 속성 추가 (Bootstrap 클래스)
labels={'content': '댓글'}	폼 라벨 이름 지정

---

💬 한마디로!

"이 한 줄로 Bootstrap 스타일이 깔끔하게 입혀진 댓글 입력창이 완성되는 것!"

필요하면 Textarea, Select, CheckboxInput 같은 다른 위젯들도 정리해드릴게요. 😎