React覚え書き

モダンなフロントエンドかけるようになりたくて、とりあえずReact始めました。
Reactを覚え中なので、そのメモを書くだけの内容です。

propsとstate

プロパティと状態。stateは動的に変化していく

props

呼び出し側からコンポーネントに渡すパラメータ。コンポーネント側でpropsを受け取り、使用する。

以下のように、呼び出し側からcolorを渡し、cssを動的に設定するなどできる。
childrenはcomportnentタグの中身。

呼び出し側

<comportnent color="red">タグの中身</compornent>

コンポーネント側

const comportnent = (props) => {
 const { color, children } = props;
 const compornentStyle = {
   color
 };
 return <p style={compornentStyle}>{children}</p>;
};

上記のコードでタグの中身が赤文字で表示される。

useSate(初期値);

stateの変数とその値をセットする関数（setter）を取得する。
useState()の引数として初期値を渡す。

useState()

  // 初期値で"おはよう"を表示し、ボタンクリックで表示を"こんにちは"に変更する
  const [message, setMessage] = useState("おはよう");

  const changeMessage = () => {
    setMessage("こんにちは");
  };

  return (
    <>
      <button onClick={changeMessage}>changeMessage</button>
      <h1>{message}</h1>
    </>
  );

再レンダリング

ReactではuseStateなどで変更がある度に、再度初めから読み込まれる。（再レンダリング）
複数の処理を記述していると何度もレンダリングされることになるため、エラーが発生することがある。
↓こういうの。

Error
Too many re-renders. React limits the number of renders to prevent an infinite loop.

React側で無限ループを防ぐ仕組みとして、再レンダリングの回数を制限してくれているらしい。
参考 ⇒ https://qiita.com/katsuomi/items/5a062dc1e4d0ab64ae21

useEffect(function(), [var...])

"この変数が変わったときだけ処理を実行する"ということができたら便利そうです。
そこで使えるのが、useEffect()です。
第1引数で実行する関数を受け取り、第2引数に変更がされる変数を配列で指定します。
配列に指定された変数が変更されたとき、第1引数の関数を実行します。

useEffect()

  const [message, setMessage] = useState("おはよう");

  const changeMessage = () => {
    setMessage("こんにちは");
  };

  // messageが変更されたときに、コンソールにメッセージを出力します。
  useEffect(() => {
   console.log({message});
  }, [message])

  return (
    <>
      <button onClick={changeMessage}>changeMessage</button>
      <h1>{message}</h1>
    </>
  );

exportとdefalut exportの違い

・defalut export

defalutでexportする場合、importの記述は上記のようになります。
import側のAppはimport側で宣言している変数なので、コンポーネントの名称と異なっていても問題ありません。
defalutの場合、1ファイルに1つしかexportできません。

defaultの場合（App.jsx)

export default App;

defaultの場合(import側)

import App from "./App";

defaultの場合(import側)

// この書き方でもok
import Appli from "./App";

・通常のexport　(どっちが通常か知りませんが。。。)

関数宣言の前にexportを記述する場合は異なります。
{}で囲って記述する必要があり、このとき記述したコンポーネント名が異なっていた場合エラーが発生します。
こちらの通常のexportの場合、1ファイルの複数のexportができます。

関数宣言の前に書く場合(App.jsx)

export const App = () => {}

関数宣言の前に書く場合(import側)

import {App} from "./App";