250212 복습2

이 코드는 React Bootstrap을 사용하여 폼을 만들고 있습니다. 아직 React와 Bootstrap이 익숙하지 않은 초급 개발자라면, 하나씩 차근차근 설명해 줄게요. 😊

---

🔹 1. 코드 개요

import { Button, Form, InputGroup } from "react-bootstrap";

• react-bootstrap 라이브러리에서 Button, Form, InputGroup 컴포넌트를 가져옵니다.
• 이 라이브러리는 기본 Bootstrap 스타일을 React에서 컴포넌트 형태로 쉽게 사용할 수 있도록 만든 라이브러리입니다.

function App(props) {
    const onSubmitInsert = props.onSubmitInsert;

• props로 부모 컴포넌트에서 전달된 onSubmitInsert 함수를 받습니다. (하지만 현재 코드에서는 사용되지 않음)

console.log('하하하');

• 콘솔에 "하하하"가 출력됩니다. (디버깅용으로 넣어둔 것 같아요.)

---

🔹 2. <Form> 태그

<Form action="#" method="post">

• <form> 태그와 동일한 역할을 합니다.
• action="#" → 폼 데이터를 어디로 보낼지를 정하는데, 현재는 #라서 아무 곳에도 전송되지 않음.
• method="post" → POST 요청으로 서버에 데이터를 보낼 때 사용됨.

---

🔹 3. <InputGroup> (입력 필드 묶음)

<InputGroup size="sm" className="mb-3">
    <InputGroup.Text id="basic-addon1">이름</InputGroup.Text>
    <Form.Control type="text" name="name" aria-describedby="basic-addon1 inputGroup-sizing-sm" />
</InputGroup>

📌 설명

• <InputGroup> → 하나의 입력 필드와 설명을 묶는 Bootstrap 스타일의 그룹.
• <InputGroup.Text> → 입력 필드 앞쪽에 설명을 붙이는 역할 ("이름", "가격" 등)
• <Form.Control> → 실제 입력 필드 (<input> 태그와 같음)
• type="text" → 텍스트 입력 필드
• name="name" → 폼 데이터를 서버로 보낼 때 name 값으로 전송됨.
• aria-describedby="basic-addon1 inputGroup-sizing-sm"
  → 웹 접근성(Accessibility)을 위한 속성으로, id="basic-addon1"을 참조하여 이 필드가 어떤 정보를 포함하는지 알려줌. (화면 낭독기 사용자를 위해)

🛠 렌더링되는 HTML

<div class="input-group input-group-sm mb-3">
    <span class="input-group-text" id="basic-addon1">이름</span>
    <input type="text" class="form-control" name="name" aria-describedby="basic-addon1 inputGroup-sizing-sm">
</div>

---

🔹 4. <Form.Select> (드롭다운)

<Form.Select size="sm" name="category" aria-label="카테고리 선택">
    <option>카테고리를 선택해 주세요.</option>
    <option value="bread">빵</option>
    <option value="beverage">음료수</option>
</Form.Select>

📌 설명

• <Form.Select> → <select> 태그와 동일한 역할.
• size="sm" → 작은 크기의 드롭다운 스타일 적용.
• name="category" → 선택된 값이 category라는 이름으로 전송됨.
• aria-label="카테고리 선택" → 접근성 속성(웹 낭독기 사용자에게 설명 제공).

🛠 렌더링되는 HTML

<select class="form-select form-select-sm" name="category" aria-label="카테고리 선택">
    <option>카테고리를 선택해 주세요.</option>
    <option value="bread">빵</option>
    <option value="beverage">음료수</option>
</select>

---

🔹 5. <Form.Control as="textarea"> (텍스트 입력창)

<Form.Control name="description" as="textarea" style={{ height: '100px' }} />

📌 설명

• as="textarea" → <input>이 아니라 <textarea>로 렌더링됨.
• style={{ height: '100px' }} → 높이를 100px로 지정.
• name="description" → 폼 제출 시 description이라는 이름으로 데이터가 전송됨.

🛠 렌더링되는 HTML

<textarea class="form-control" name="description" style="height: 100px;"></textarea>

---

🔹 6. <Button> (제출 버튼)

<Button type="submit" value={'생성'}>생성</Button>

📌 설명

• <Button>은 Bootstrap 스타일이 적용된 버튼.
• type="submit" → 버튼 클릭 시 폼 제출.
• value={'생성'} → HTML 버튼의 value 속성이 "생성"이지만, 사실상 버튼 내부의 "생성" 텍스트와 동일한 역할을 하므로 불필요.

🛠 렌더링되는 HTML

<button type="submit" class="btn btn-primary">생성</button>

---

🔹 7. props.onSubmitInsert

현재 onSubmitInsert라는 이벤트 핸들러가 props로 전달되었지만, 코드에서는 사용되지 않음.
만약 폼 제출 시 이벤트를 실행하려면 onSubmit 속성을 추가해야 함.

✅ 수정된 코드 예시

<Form action="#" method="post" onSubmit={onSubmitInsert}>

이렇게 하면, 부모 컴포넌트에서 전달한 onSubmitInsert 함수가 실행됨.

---

🔥 정리

태그	설명
<Form>	폼을 감싸는 태그 (<form>과 동일)
<InputGroup>	입력 필드를 그룹으로 묶음
<InputGroup.Text>	입력 필드 앞에 설명(레이블) 추가
<Form.Control>	기본 입력 필드 (<input>과 동일)
<Form.Select>	드롭다운 (<select>과 동일)
<Button>	버튼 (<button>과 동일)
as="textarea"	<input> 대신 <textarea>로 렌더링

이제 코드를 보면 구조를 좀 더 이해할 수 있을 거예요! 😃
더 궁금한 부분이 있으면 질문 주세요! 🚀