Remix

• app/root.tsx：アプリケーション全体の共通処理や共通レイアウトを定義
  • UIで最初にレンダリングされるコンポーネント
  • ページのグローバルレイアウトが含まれる
  • <Outlet>で子ルートがレンダリングされる場所を指定できる
  • <Layout>：
  • <ScrollRestoration>：クライアント側の遷移のスクロール位置を管理
    • ？なんのために使っている？
• app/routes
  • URLに一致するディレクトリ/ファイルを作成
    • app/routes/_index.tsx→「/」で一致
    • app/routes/about.tsx →「/about」で一致
  • ドットで分割されたファイル名の前の部分が一致するファイル同士は親子関係が形成
  • 子要素ファイル名の親セグメントの末尾に_をつけることで、URLを入れ子にしつつ、親要素のレイアウトは引き継がないことができる
    • app/routes/home_.mine.tsx→root.tsxが親になる
• loader：ページが表示される前に自動で実行される
  • サーバーレンダリング時に、データを簡単に取得することができる
  • loaderで取得したデータを表示するにはuseLoaderDataを使う
• Dynamic Segments：動的に変わるURLのパス部分をマッチさせて、その値をコード上で使えるようにする機能
  • 動的に変わる部分はposts.$postId.tsxと「$」を指定する
• action関数：POSTやDELETE、PUT、PATCH リクエストが送られた時に実行
  • <Form>を使い、method="post"等でフォームが送信されるとaction 関数が呼ばれる
  • submitしないとaction関数は実行されない

• useState
  • Object.is による比較アルゴリズムを使用している」ため、参照が同じ場合には、変更がないとみなされ、再レンダリングが行われない
    • オブジェクトのディープコピー：JSON.parse(JSON.stringify(args))
      • これやらないとダメ？？本当に？？
    • スプレッド構文でオブジェクトを新しく作成もありか
      • const newIssues = [...issues];
      • https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax