React Custom Component(알게된 것)

ock·2023년 2월 21일

시작하기전에

오늘 페어와 함께 React Custom Component과제를 진행하게 되었다.

Bare minimum Requirement 으로
"Modal"
"Toggle"
"Tap"
"Tag"
를 만드는 것이고,

Advanced Challenge 는 Optional로
"Autocomplete Component"
"ClickToEdit Component"
를 만드는 것이었다.

과제는 내일까지 이어지므로 작성한 코드는 내일 올리도록 하고, 오늘은 과제를 하면서 새롭게 알게된 혹은 얕게 알고 있었던 개념들 위주로 정리해보려고 한다.

event.stopPropagation()

function MyComponent() {
  function handleClick(e) {
    e.stopPropagation();
    console.log('Button clicked.');
  }

  return (
    <div className="outer" onClick={() => console.log('Outer clicked.')}>
      <div className="inner" onClick={() => console.log('Inner clicked.')}>
        <button onClick={handleClick}>Click me</button>
      </div>
    </div>
  );
}

modal을 구현하는데 알게 된 개념이다.
자식 이벤트를 클릭했을 때 부모 이벤트까지 인식이 되어 부모에 걸려있는 이벤트 핸들러가 실행이 되어버린다. 이를 이벤트 버블링 이라고 한다.

한마디로 이벤트 버블링은 하위 요소에서 발생한 이벤트가 상위 요소로 전파되는 현상을 말한다.

위 코드를 예로 설명해보면,
위 코드에서, 'handleClick'함수는 'button'요소의 클릭 이벤트 핸들러로 사용된다.
'button'을 클릭하면 button -> inner -> outer의 순서로 클릭 이벤트가 전파된다.
즉, button을 클릭하면 button 요소 이외의 inner와 outer 요소에 등록된 클릭 이벤트 핸들러가 이미 실행된 상태이므로, console.log('Button clicked.')이 출력되고 console.log('Inner clicked.')와 console.log('Outer clicked.')도 출력된다.

이를 막을 수 있는 것이 바로 event.stopPropagation() 이다.
위 함수에서 event.stopPropagation()을 호출하여 이벤트 버블링을 막을 수 있다.
따라서, button을 클릭하면 Button clicked.만 출력되고, inner와 outer의 클릭 이벤트는 발생하지 않는다.

이렇게 event.stopPropagation() 메서드를 사용하면, 이벤트 버블링을 통해 의도치 않게 발생하는 이벤트를 막을 수 있다.

HTML Entities

HTML에는 미리 예약된 몇몇 문자가 있으며, 이러한 문자를 HTML 예약어라고 부른다.
이러한 HTML 예약어를 HTML 코드에서 사용하면, 웹 브라우저는 그것을 평소와는 다른 의미로 해석한다.
따라서 HTML 예약어를 기존에 사용하던 의미 그대로 사용하기 위해 별도로 만든 문자셋을 엔티티라고 한다.