이벤트 버블링 예제(2) feat. Ant Design 사용

Ant Design의 아이콘 자체는 콘솔 창에서 SVG로 변경되고 이를 span태그가 감싸는 형태로 바뀐다.icon 자체에 id를 달아둬도 콘솔 창에서는 둘로 나뉜 뒤, icon의 레퍼인 span에 id가 옮겨간다. 결국 icon에 onclike을 달아 event.target.id을 가져오려 하면 안뜬다. id가 있는 부분을 클릭하려 해 봤자 svg만 클릭되니까. 이때 event Bubbling을 사용해여 해결한다.

1. icon 바깥에 div 태그를 만들어 onClick과 id를 배치한다.
2. 버블링 원리에 의해 icon (svg) 클릭 시 (div의) onClick이 실행된다.
3. onClick에 바인딩 된 함수에 event.currentTarget.id을 사용한다.
   currentTarget.id는 버블링의 마지막 순서인 div태그의 id를 지시한다.

 console.log(`currentTarget: ${event.currentTarget.id}`); 
    console.log(`target ${event.target.id}`);

아래의 경우 버블링으로 인해 onClick 자체는 실행되나 span에는 ID가 없으므로
이런 결과로 나온다.

예제 코드

import { UpCircleOutlined } from "@ant-design/icons";
import { MouseEvent } from "react";
import styled from "@emotion/styled";

const MyIcon = styled(UpCircleOutlined)`
  color: red;
  font-size: 50px;
`;

/*import styled from "@emotion/styled";

export const RedInput = styled.input
` color: red;
box-shadow: 1px 1px 0.2 black;`

기존 형태의 JSX
 */

export default function LibraryIconPage(): JSX.Element {
  const onClickDelete = (event: MouseEvent<HTMLDivElement>): void => {
    console.log(`currentTarget: ${event.currentTarget.id}`);
    console.log(`target ${event.target.id}`);
  };

  return (
    <div id="삭제할게시글ID" onClick={onClickDelete}>
      <MyIcon id="삭제할게시글Icon" />
    </div>
  );

  /*emotion과 CSS를 같이 써보자.  */
}