11일차 / Event Bubbling, Ant Design

김혜진·2022년 3월 28일

포트폴리오 코드리뷰

commentWrite, commentList 페이지를 각각 만들어야 한다.
나는 Write 한 페이지에 다 넣으려고만 생각해서 잘 안됐던 것 같다.

이벤트 버블링

자식에서 부모로 이벤트 전파

어딜 클릭하든 동일한 로직이 실행되게 하려면 onClick을 어디에 두어야 할까?

자식을 클릭했지만 부모에 있는 onClick도 실행이 되게 한다.
이렇게 이벤트가 전파되는 것을 이벤트 버블링이라고 한다.
부모에서 자식으로 전파되는 것은 캡쳐링이라고 한다.

onClick을 부모에 넣고 id를 자식에 넣으면 이벤트가 실행된다.
하지만 자식의 모든 태그들에 같은 id를 써줘야하는 문제점이 있다.
이건 어떻게 해결해야할까?

(event.currentTarget.id)를 사용해주면 된다.

라이브러리

바퀴를 재발명하지 마라
1. 시간절약
2. 버그 최소화

npm docs를 많이 볼 것.
npm recharts
npm player

Ant Design에서 아이콘 가져오기

yarn add @ant-design/icons

 state = {
    value: 3,
  };

  handleChange = value => {
    this.setState({ value });
  };

=> react에서 사용하기

import { useState } from "react";
import { Rate } from "antd";

export default function LibraryStarPage() {
 const [value, setValue] = useState(3);

 const handleChange = (value) => {
   setValue(value);
 };

 return <Rate onChange={handleChange} value={value} />;
}

React에서 Ant Design css사용하기

.add.tsx에 import 'antd/dist/antd.css'; 추가

아이콘에 id는 못 쓴다.

css를 추가하는 법(emotion 사용)

import { QuestionCircleOutlined } from "@ant-design/icons";
import styled from "@emotion/styled";

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

export default function LibraryIconPage() {
  return <MyIcon />;
}

font-size로 사이즈 결정

Youtube 사이즈 변경

import ReactPlayer from "react-player";

export default function LibraryYoutubePage() {
  return (
    <ReactPlayer
      url="https://www.youtube.com/watch?v=ysz5S6PUM-U"
      width={500}
      height={500}
    />
  );
}

마찬가지로 style을 주고 싶으면 emotion으로 감싸준다.

별점 바꾸기

import { useState } from "react";
import { Rate } from "antd";

export default function LibraryStarPage() {
  const [value, setValue] = useState(3);
  // 3

  const handleChange = (value) => {
    // handle change 값 들어옴(5)
    setValue(value);
    // 5
  };

  return <Rate onChange={handleChange} value={value} />;
  // 별점 누르면 handleChange 실행(5)     // value 값 바인딩 (3)
}

// 스코프 체인에 의해 값 변화

여기서 onChange는 HTML의 onChange가 아니라, Ant Design 개발자 분들이 만든 똑같은 이름을 가진 다른 함수다.
따라서 event가 들어가지 않고 value값이 들어간다.