이벤트 버블링과 이벤트 전파

프로젝트를 진행하면서 게시판 목록에서 목록을 클릭하여 상세보기로 넘어가는 과정에서 작동이 잘 되지 않는 부분이 있었다.

그 이유는 Event Bubbling(이벤트 버블링) 때문이다.

이벤트 버블링 이란 특정 화면 요소에서 이벤트가 발생하였을때, 해당 이벤트가 더 상위의 화면 요소들로 전달되는 특성을 의미한다.

예를 들어,

<form onclick="alert(form)">
  <div onclick="alert(div)">
    <p onclick="alert(p)">P</p>
  </div>
</form>

위와 같은 구조에서

를 클릭하면 p→div→form 순서로 3개의 경고창을 나타나게 된다.

프로젝트에서는 목록의 제목이나 내용에 onClick함수가 있는것이 아닌 전체를 감싸주는 박스에 onClick함수가 있을 경우 발생하게 된다. 이러한 경우 event.target.id가 아닌 event.currentTarget.id 를 사용하여 버블링을 막아 줄 수 있다.

이처럼, 이벤트 버블링은 이벤트가 하위(자식)태그부터 상위(부모)태그 방향으로 전파가 되는 것이고, 반대로 상위 태그에서 하위태그 방향으로 전파되는 것은 이벤트 캡처링 이라고 한다.

이벤트 캡쳐링

캡쳐링은 버블링과 반대로 상위에서 하위로 이벤트가 전파되는 단계이다. 캡쳐링에 관한 코드를 발견하는 일은 거의 없지만, 발생하게 된다면 이 개념을 이해하고 있어야 이벤트 핸들링을 해줄 수 있기 때문에 캡쳐링과 버블링 두 개념 모두 알고 있도록 하자!

추가 설명

 const onClickAlert = (event:any) => {
    alert("클릭 div")
 }
 const qqq = () => {
    alert("클릭 타이틀")
 }
  return (
    <div>
      {data?.fetchBoards.map((el:any) => (
        <div id={el.writer} onClick={onClickAlert}>
          <span>
            <input type="checkbox"></input>
          </span>
          <span style={{margin:"10px"}}>{el.number}</span> 
          <span style={{margin:"10px"}} onClick={qqq}>{el.title}</span>
          <span style={{margin:"10px"}}>{el.writer}</span>
        </div>
      ))}
      {/*<div>1번 페이지 이동이 완료되었습니다.</div>
      <div>작성자는 {data?.fetchBoards.writer}입니다.</div>
      <div>제목: {data?.fetchBoards.title}</div>
      <div>내용: {data?.fetchBoards.contents}</div>*/}
    </div>
  );

위 코드를 실행했을 때, 제목을 클릭하면 qqq와 onClickAlert 둘 다 실행이 된다.
그 이유는 클릭이 자식 div에서 부모 div까지 전파가 되기 때문이고, 이러한 하위에서 상위로 전파하는 것을 이벤트 버블링이라고 한다.

 const onClickAlert = (event:any) => {
    alert(event.target.id)
 }
return (
    <div>
      {data?.fetchBoards.map((el:any) => (
        <div id={el.writer} onClick={onClickAlert}>
          <span>
            <input type="checkbox"></input>
          </span>
          <span style={{margin:"10px"}}>{el.number}</span> 
          <span style={{margin:"10px"}}>{el.title}</span>
          <span style={{margin:"10px"}}>{el.writer}</span>
        </div>
      ))}

만약 이런 상황이라면, title을 클릭했을 때, onClickAlert에서 id를 감지하지 못한다.
왜냐하면, 부모div가 눌려진 것이 아닌, 자식div(title)을 먼저 판단하기 때문에 id가 감지되지 않는다.
그러나, 자식 div가 없는 외부배경을 클릭하면 정상적으로 id가 인식이 된다.

해결방법
1) 무엇을 선택해도 id가 들어갈 수 있게 자식 태그에 동일한 id 속성을 작성한다.
-> 자식이 1000개면 1000개를 다?... 상당히 비효율적
2) event.currentTarget.id 이용 -> 어떤 것을 선택하더라도, onClick에 바인딩 되어있는 태그의 id를 가져온다.

코드 포멧터와 린터

코드의 규칙 정하기

우리는 협업시에 팀단위로 코딩을 하게 됩니다. 따라서 각자의 코드 스타일이 다르게 됩니다.

이렇게 다양한 사람들고 협업을 하게 되면서 일정한 규칙을 정하게 되면, 일이 조금 더 수월하게 진행이 가능합니다.

코드린터와 코드 포멧터

• 코드 린터 는 문법에서 에러는 아니지만 에러로 약속하자고 규칙을 정하는 것 이다.

에러는 아니라 규칙에 어긋나는가를 검사하기 때문에 vscode에서 빨간 줄이 그여도 실행하는데는 아무 문제가 없다.

코드린터 : eslint

eslint 의 규칙으로는 import 순서, ==금지 등이 있을 수 있습니다. 또한 eslint자체에 포메터 기능도 어느정도 가지고 있다.

• 코드 포메터는 코드를 보기 좋게 만들어주는 것 이다.

코드 포메터 : prettier

prettier의 규칙으로는 띄어쓰기 2칸,-길이 넘으면 줄바꿈 하기 등이 있다.