Reactメモ

propsの分割代入

propsは最初の段階で分割代入しておくと、それ以降で毎回props.みたいな記述を行う必要がないのでいい感じ

const App = (props) => {
  const { name, age } = props;
  return (
    <div>
      <div>{name}</div>
      <div>{age}</div>
    <div>
  )
}

みたいに書くことができる。

オブジェクトのプロパティの省略記法

オブジェクトのキーとプロパティが同名の場合は省略して記述することができる。

const TestObj = {
  color, //みたいに書くことができる。
  fontSize: "18px"
};

useStateの使い方

reactライブラリからuseStateを取り出してそこからstateを分割代入する形で値を使用する

import React from "react";
import { useState } from "react";

const App = () => {
  //カウントアップのstate
  const [num, setNum] = useState(1);
  //true、falseを切り替えるstate
  const [face, setFace] = useState(true);

  const onClickAdd = () => {
    //クリックされた時に+1をする関数
    setNum(num + 1);
  };

  const onClickSwitchFace = () => {
    //true, falseを切り替える関数
    setFace(!face);
  };

  return(
    <div>
      {/* state表示 */}
      <div>{num}</div>
      {/* クリックされた時にカウントアップする関数を呼び出し */}
      <button onClick={onClickAdd}>ボタン</button>
      {/* faceがfalseの時に顔文字を表示 */}
      {face && <div>（ ;  ; ）</div>}
      {/* クリックされた時にtrue,falseを切り替える関数を呼び出し */}
      <button onClick={onClickSwitchFace}>on/off</button>
    </div>
  )
}

export default App

useEffectの使い方

関数の関心を切り分けるために使用する

マウンティング時にのみ実行(コンポーネントが最初にレンダリングされた時のみ)

useEffect(() => {
  console.lot("useEffect");
}, [])

マウンティング時とnumのstateが変更された時に実行

const [num, setNum] = useState();

useEffect(() => {
  console.lot("useEffect");
}, [num])

if文の省略形

例えば、空文字がstateにsetStateされないようにしたい場合は以下のように記述することができる。

const onPushTodo = () => {
  //if文の省略形
  if (todoText === "") return;
  const pushTodo = [...inCompleteToDos, todoText];
  setInCompleteToDos(pushTodo);
  setTodoText("");
};