この <button> は JSX 要素 (JSX element) と呼ばれます
JSX 要素とは、何を表示したいかを記述するための JavaScript コードと HTML タグの組み合わせ

複数の隣接する JSX 要素は、以下のようにフラグメント（<> および </>）で囲むようにします。

export default function Square() {
  return (
    <>
      <button className="square">X</button>
      <button className="square">X</button>
    </>
  );
}

React は、useState という特別な関数を提供しており、コンポーネントからこれを呼び出すことで「記憶」を行わせることができます。

useState

const [value, setValue] = useState(null);

• useState は現在の状態の値と、その状態を更新するための関数の両方をペアとして返します
• これを分割代入している

子のstate管理をどうするか

複数の子コンポーネントからデータを収集したい、あるいは 2 つの子コンポーネント同士で通信したい、と思ったら、代わりに親コンポーネントに共有の state を宣言するようにしてください。

何をstateと扱うか

1. 時間が経っても変わらないものですか？ そうであれば、state ではありません。
2. 親から props 経由で渡されるものですか？ そうであれば、state ではありません。
3. コンポーネント内にある既存の state や props に基づいて計算可能なデータですか？
4. フィルタリングされた商品のリストは、元の商品リストを検索テキストとチェックボックスの値に従ってフィルタリングすることで計算できるため、state ではありません。

2 種類の “モデル” データ props と state

• props は関数に渡す引数
• state はコンポーネントのメモリ

Too many re-renderに注意

• useState()の値を書き換える処理が初期値も当てはまるとき、レンダリングが無限に起きちゃう
• || や && を活用して上手く回避してね

URLパラメータ

• useParams();

クエリパラーメータ

• useLocation();
• search内にある
• イメージは下記

<Liink to="/page2/100?name=hoge">

const {search} = useLocation();
const query = new URLSearchParams(search);
console.log(query.get("name")) // hoge

stateを画面遷移で持たせる

<Liink to="/page2/100?name=hoge", state: hoge>

const {state} = useLocation();

• アスタリスクで404に対応できるよ！

• 例えば、ボタンはボタンで部品化して使い回す
• また、ボタンも抽象化できる部分は切り出す
• 様々なところで汎用的に使いませることがメリット

実現方法

• 定義する側

import React,{ createContext} from "react";

export const UserContext = createContext({});

export const UserProvider = (props)=>{

  const {children} = props;
  const constName = "しゃけ";
  return(
    <UserProvider.Provider value={{constName}}>
      {children}
    </UserProvider.Provider>
  )
}

• 使用する側

import { UserContext } from "定義元";

const context = userContext(UserContext);
console.log(context); // {constName: "しゃけ"}

stateを使う場合

import React,{ createContext} from "react";

export const UserContext = createContext({});

export const UserProvider = (props)=>{

  const {children} = props;
  const [userInfo,setUserInfo] = useState(null);
  return(
    <UserProvider.Provider value={{userInfo,setUserInfo}}>
      {children}
    </UserProvider.Provider>
  )
}

• グローバルstateを更新すると配下の要素は再レンダリングされる(当たり前)

• Recoli便利

• JsonPlaceHolder はJsonのデータ返してくれる

• Javaと型の感覚は一緒っぽいので助かる

let arr1: Array<number> = [0,1,2] // 数値型の配列 
let arr2: number[] = [0,1,2] // 数値型の配列

Pick

https://www.typescriptlang.org/docs/handbook/utility-types.html

Constructs a type by picking the set of properties Keys (string literal or union of string literals) from Type.

• 対処の型から特定のプロパティを抜き出す

Pick<対処の型,"抜き出したいプロパティ" | "抜き出したいプロパティ">

Omit

Constructs a type by picking all properties from Type and then removing Keys (string literal or union of string literals). The opposite of Pick.

Pick<対処の型, "取り除きたいプロパティ">

• ご察しの通り

FCとVFC

• 関数の型はFC
• FC関数型は暗黙的にchildrenを含む
• 暗黙的に含むのを辞める流れが来てる(18から?)

https://chaika.hatenablog.com/entry/2022/05/17/083000

オプショナルチェイニング

• ネストになっている配列がnullでも安全なコードを書く手法

hoge?.fuga

• hogeがnullならundifindになる