TIL(2/29) / lv3

과제를 하면서 내가 평소에 긴가민가 했던 부분을 정리해보고 가면 좋을 것 같아서 3가지를 정리해보려고 한다.

 

1. input, label 연결은 필수인가?
2. form 태그에 대하여
3. e.stopPropagation()

---

input

속성들

type="text": 문자

type="number": 숫자

type="password": 비밀번호

type="button": 버튼

type="submit": form 데이터 제출 시

type="reset": form 데이터 초기화

type="radio": 라디오 (단일선택)

type="checkbox": 체크박스 (다중선택)

type="file": 파일 업로드 시

type="hidden": 화면에 보이지 않는 숨겨진 요소

등등...

 

name

서버로 보내질 이름

 

label

input 태그는 label 태그와 함께 쓰여 input의 설명을 보충한다.

다른 태그로 쓸 수도 있지만 label태그가 웹 표준

label의 for 속성과 input의 id 속성을 같은 값으로 입력하여 두 태그를 연결할 수 있다.

ex) input태그를 label과 연결시키면 label만 눌러도 클릭된다

 

장점

1. label을 클릭해도 input 내용이 작동한다.
2. label로 묶여 있는 내용도 input과 한 그룹으로 인식하므로,
   화면리더기 등 보조기술 사용 시 input을 인식할 때 label도 함께 읽어준다.

 

input + label 사용법

// 명시적 작성(마크업) 방식
// label과 input을 같은 레벨에 두고 작성한 방식
// label을 먼저 작성해주어야 한다!
<div>
    <label for="test1">여기를 클릭해보세요</label>
    <input id="test1" type="checkbox">
</div>

// 암시적 작성 방식
// for와 id를 굳이 연결하지 않아도 된다. => label이 input을 감싸고 있기 때문에!
<div>
    <label>여기를 클릭해보세요<input type="checkbox"></label>
</div>

---

form

속성

action: 폼을 전송할 서버 쪽 스크립트 파일을 지정

name: 폼을 식별하기 위한 이름을 지정

accept-charset: 폼 전송에 사용할 문자 인코딩을 지정

target: action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정

method: 폼을 서버에 전송할 http 메소드를 정함

 

폼 엘리먼트 그룹 <field>, <legend> 태그

fieldset 태그: 폼 태그 안에 관련 있는 폼 엘리먼트들을 그룹화할 때 사용

legend 태그: 그룹화한 폼 엘리먼트들을 목적에 맞게 이름을 지정

---

e.stopPropagation()

버블링을 중단시키는 메소드

 

↓ 과제 중 모달 구현한 부분 ↓

const [isSecondModalOpen, setIsSecondModalOpen] = useState(false);

const openSecondModalHandler = () => {
    setIsSecondModalOpen(!isSecondModalOpen);
};
  
(...생략)

<>
    <Button onClick={openSecondModalHandler}>
      Open Modal
    </Button>
    {isSecondModalOpen ? (
      <ModalBackdrop onClick={openSecondModalHandler}>
        <SecondModalView onClick={(e) => e.stopPropagation()}>
          <p>
            닫기와 버튼 1개가 있고, <br />
            외부 영역을 누르면 모달이 닫혀요.
          </p>
          <ExitButton onClick={openSecondModalHandler}>
            x
          </ExitButton>
        </SecondModalView>
      </ModalBackdrop>
    ) : null}
</>

백드롭 온클릭 이벤트⭕️ && e.stopPropagation() ⭕️ && X버튼⭕️

=> 원하는 대로 작동되는 코드

 

백드롭 온클릭 이벤트 ⭕️ && e.stopPropagation() ❌ && X버튼 ❌,

백드롭 온클릭 이벤트 ⭕️ && e.stopPropagation() ❌ && X버튼 ⭕️
=> 어딜 눌러도 닫힌다

 

백드롭 온클릭 이벤트 ❌ && e.stopPropagation() ❌ && X버튼 ⭕️

=> 버튼만 눌려도 닫힌다. (다른 곳 눌러도 안 닫힘)

 

백드롭 온클릭 이벤트 ⭕️ && e.stopPropagation() ⭕️ && X버튼 ❌
=> 백드롭 눌렀을 때만 닫힌다

 

의문점

그럼 ModalView의 e.stopPropagation()은 백드롭에서 오는 캡처링을 막고

부모(Backdrop)와 자식(ExitButton)이 같은 이벤트를 가지고 있으니 X버튼에서 오는 버블링을 막는 것인가요?

아니면 그저 ExitButton의 버블링만 막는 것인가요?