ReactでuseEffectを使う

# 再レンダリング
再レンダリングはまずいつ起こるかについてです。

1.```stateが更新された時```
2.```propsが更新された時```
3.```親コンポーネントが再レンダリングされた時```

みたいです。

https://hinoshin-blog.com/react-rendering/

```App.jsx
import React, { useState } from "react"; //Reactをインポート
import ColorMessage from "./components/ColorMessage";

const App = () => {
  //Appはこの中でしか使えない
  const [count, setCount] = useState(0); //[]で配列の分割代入　1つ目はstateとして使う変数名　2つ目はそのstateを変更するための関数 0で初期値を設定
  const [smileFace, setSmileFace] = useState(true); //smileの関数　レンダリングの処理

  const clickPlus = () => {
    //setCount(100); //プラスボタンを押すと100になる
    setCount(count + 1); //プラスボタンを押すと+1
  };

  const clickSwitchSmileFace = () => {
    setSmileFace(!smileFace);
  };

  return (
    <>
      <h1 style={{ color: "blue" }}>React入門</h1>
      <ColorMessage color="green">基礎をやりましょう</ColorMessage>
      <ColorMessage color="orange">基礎は大事</ColorMessage>
      {/* <p style={contentStyle2}>アウトプットもしっかりやろう</p> */}
      <button onClick={clickPlus}>プラスボタン</button>
      <br />
      <button onClick={clickSwitchSmileFace}>on/off</button>
      <p>{count}</p>
      {smileFace && <p>(￣∇￣)</p>}
    </>
  );
};

export default App; //Appを他でも使える
```

```ColorMessage.jsx
import React from "react";

const ColorMessage = (props) => {
  //onsole.log("カラー");
  const { color, children } = props;
  const contentStyle = {
    color, //color: color,を省略
    fontSize: "20px",
    fontWeight: "30px"
  };
  return <p style={contentStyle}>{children}</p>; //propsを渡す
};

export default ColorMessage;
```
これで***on/offボタンを押すと(￣∇￣)が表示されたりされなかったり***します。
なぜ再読み込みしなくても
```
<p>{count}</p>
{smileFace && <p>(￣∇￣)</p>}
```
の値が変わるのかというとコンポーネントがサイレンダリングされているからです。

次はカウントが５の倍数になったら笑顔マークが出る処理にしていきます。

```App.jsx
import React, { useState } from "react"; //Reactをインポート
import ColorMessage from "./components/ColorMessage";

const App = () => {
  console.log("テスト");
  //Appはこの中でしか使えない
  //const clickButton = () => alert();
  const [count, setCount] = useState(0); //[]で配列の分割代入　1つ目はstateとして使う変数名　2つ目はそのstateを変更するための関数 0で初期値を設定
  const [smileFace, setSmileFace] = useState(false); //smileの関数　レンダリングの処理

  const clickPlus = () => {
    //setCount(100); //プラスボタンを押すと100になる
    setCount(count + 1); //プラスボタンを押すと+1
  };

  const clickSwitchSmileFace = () => {
    setSmileFace(!smileFace);
  };

  if (count > 0) {
    if (count % 5 === 0) {
      smileFace || setSmileFace(true);
    } else {
      smileFace && setSmileFace(false);
    }
  }

  return (
    <>
      <h1 style={{ color: "blue" }}>React入門</h1>
      <ColorMessage color="green">基礎をやりましょう</ColorMessage>
      <ColorMessage color="orange">基礎は大事</ColorMessage>
      {/* <p style={contentStyle2}>アウトプットもしっかりやろう</p> */}
      <button onClick={clickPlus}>プラスボタン</button>
      <br />
      <button onClick={clickSwitchSmileFace}>on/off</button>
      <p>{count}</p>
      {smileFace && <p>(￣∇￣)</p>}
      <li>HTML CSS</li>
      <li>JavaScript</li>
    </>
  );
};

export default App; //Appを他でも使える

```

しかしstateなどが多くなってくると動かなくなってくることはあります。

# useEffect
useEffectに渡された関数はレンダーの結果が画面に反映された後に動作します。
関数の実行タイミングをReactのレンダリング後まで遅らせます。

```jsx
useEffect(() => {
  /* 第1引数には実行させたい副作用関数を記述*/
  console.log('副作用関数が実行されました！')
},[依存する変数の配列]) // 第2引数には副作用関数の実行タイミングを制御する依存データを記述
```

> 引用　https://qiita.com/seira/items/e62890f11e91f6b9653f



```App.jsx
/*eslint react-hooks/exhaustive-deps: off */  //eslintをoffにする
import React, { useEffect, useState } from "react"; //Reactをインポート
import ColorMessage from "./components/ColorMessage";

const App = () => {
  console.log("テスト");
  //Appはこの中でしか使えない
  //const clickButton = () => alert();
  const [count, setCount] = useState(0); //[]で配列の分割代入　1つ目はstateとして使う変数名　2つ目はそのstateを変更するための関数 0で初期値を設定
  const [smileFace, setSmileFace] = useState(false); //smileの関数　レンダリングの処理

  const clickPlus = () => {
    //setCount(100); //プラスボタンを押すと100になる
    setCount(count + 1); //プラスボタンを押すと+1
  };

  const clickSwitchSmileFace = () => {
    setSmileFace(!smileFace);
  };

  // useEffect(() => {
  //   console.log("effect");
  // }, [count]); //[]のように配列が空の場合は最初の処理だけが実行される　ここではテスト

  useEffect(() => {
    if (count > 0) {
      if (count % 5 === 0) {
        smileFace || setSmileFace(true);
      } else {
        smileFace && setSmileFace(false);
      }
    }
  }, [count]);
  //[count,,smileFace]でも可
  return (
    <>
      <h1 style={{ color: "blue" }}>React入門</h1>
      <ColorMessage color="green">基礎をやりましょう</ColorMessage>
      <ColorMessage color="orange">基礎は大事</ColorMessage>
      {/* <p style={contentStyle2}>アウトプットもしっかりやろう</p> */}
      <button onClick={clickPlus}>プラスボタン</button>
      <br />
      <button onClick={clickSwitchSmileFace}>on/off</button>
      <p>{count}</p>
      {smileFace && <p>(￣∇￣)</p>}
      <li>HTML CSS</li>
      <li>JavaScript</li>
    </>
  );
};

export default App; //Appを他でも使える
```

```ColorMessage.jsx
import React from "react";

const ColorMessage = (props) => {
  //console.log("カラー");
  const { color, children } = props;
  const contentStyle = {
    color, //color: color,を省略
    fontSize: "20px",
    fontWeight: "30px"
  };
  return <p style={contentStyle}>{children}</p>; //propsを渡す
};

export default ColorMessage;
```

```index.js
import React from "react"; //Reactをインポート
import ReactDom from "react-dom"; //React-domをインポート
import App from "./App"; //App.jsからimport

//React開発の基盤作り
ReactDom.render(<App />, document.getElementById("root")); //レンダリング //rootはindex.htmlの<div id="root"></div>
```

# 資料

https://www.udemy.com/course/modern_javascipt_react_beginner/

https://qiita.com/seira/items/e62890f11e91f6b9653f