[ 31 ] ant design UI 프레임워크 사용해보기

https://ant.design/components/overview/

Components Overview - Ant Design

원하는 요소를 클릭해서 사용법을 확인해보면 된다.

아이콘 사용해보기

yarn add @ant-design/icons

import { StepForwardOutlined } from "@ant-design/icons";

return( <StepForwardOutlined /> )

Ant Design에 CSS-IN-JS 적용하기 

styled( 원하는 Ant Design 요소 ) 

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

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

export default function LibraryIconPage() {
  const onClickDelete = (e: MouseEvent<HTMLDivElement>): void => {
    console.log(e.currentTarget.id);
  };
  return (
    <div id="삭제할게시글ID" onClick={onClickDelete}>
      <MyIcon />
    </div>
  );
}

ICON 과 이벤트 버블링 

아이콘을 import 해서 사용할때 이벤트 버블링이 발생한다. 이때 아이콘은 SVG 로 바뀌고 SPAN으로 감싸지게 된다. 

이때 e.target.id 를 하면 span 태그의 값이 나오게 된다.

따라서 e.target.currentTarget.id 를 사용한다.