[TIL 11日目]

昇格state

ステータスを親から子に渡し、子から親に変更する場合は、setStateを子に渡し、子にsetStateを実行して親のステータスを変更できます.

「タイプスクリプト」を参照してください。

propsはタイプ推論ではないので、すべてのタイプを自分で記入します.

UIフレームワーク

一人で機能を実装することも重要ですが、異なるブラウザで異なるサイズで適用する場合は、エラーが発生しないように、UIフレームワークを十分に活用することも重要です.

アイコンAnt-Design

id値を読み込めないため、id値を入力できません.

export default function LibraryIconPage() {
  return (
    <div>
      <MyIcon />
      {/* id={data._id} 아이콘에서는 이렇게 id 주면 사라지기떄문에 왠만하면 쓰지않는다.*/}
    </div>
  );
}

採点

AnddからRateをインポート

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

各星の名前を宣言

const desc = ["1점", "2점", "3점", "4점", "5점"];
// 위쪽에 넣는 기준  - 하드코딩 (한번만들고 두번다시 거치지 않을 것들)
// 이유 - state가 바뀌면 컴포넌트가 다시 한번 도니까 값이 바뀌지 않을것들은 밖에 있어야한다.

useStateを使用して、恒星をクリックしたときに対応する値(4つの星4点)を置き換えます。

export default function LibraryStarPage() {
  const [value, setValue] = useState(3);
  //   const aaa = 3; 
  // 자신과 가장 가까운 중괄호안에잇는 aaa 를찾고 없으면 다음 중괄호에서 찾는다.
  const handleChange = (value) => {
    // value 는 화살표로 된 중괄호 안의 value 다!
    // console.log(aaa); // 가장 가까운 중괄호안에있는 aaa
    setValue(value);
    alert(value + "점");
  };

htmlにRateを入れ、値に応じて名前を指定します。

  return (
    <span>
      <Rate onChange={handleChange} value={value} />
      {value ? <span className="ant-rate-text">{desc[value - 1]}</span> : ""}
    </span>
  );
}

Youtube

ReactPlayerのインポート

import ReactPlayer from "react-player";
import styled from "@emotion/styled";
css 만들기 AntD와 같이 styled() 괄호안에 ReactPlayer 를 넣어준다.
const MyYoutube = styled(ReactPlayer)`
  border: 3px solid yellow;
`;
```js
html에서 url 주소 가져오기 / 크기와 다양한 명령어(muted , playing) 지정

export default function LibraryYoutubePage() {
return (
);
}