Propsによるデータの受け渡し(チルドレン属性、コンポーネントへの型付け)

スポンサーリンク
Propsによるデータの受け渡し(チルドレン属性、コンポーネントへの型付け)

【実務・中級編】 PickやOmitを用いたPropsの型操作 – React実践ガイド

React×TypeScriptの「型泥沼」から脱却せよ:PickとOmitでPropsを自在に操る極意フロントエンドの現場で「Propsの型定義、面倒くさいな」と感じたことはないだろうか?コンポーネントが肥大化し、似たようなPropsを何...
Propsによるデータの受け渡し(チルドレン属性、コンポーネントへの型付け)

【実務・中級編】 React.ComponentPropsユーティリティ型 – React実践ガイド

Reactの型定義で消耗しないために:`ComponentProps`を使いこなすプロの流儀現場でReactを書いていると、一度はこんな経験をするはずだ。「既存のボタンコンポーネントに機能を追加したいが、Propsの型定義をコピペして管理す...
Propsによるデータの受け渡し(チルドレン属性、コンポーネントへの型付け)

【実務・中級編】 Props Drilling問題と解決策 – React実践ガイド

Props Drillingの迷宮:なぜ私たちは「無意味なバケツリレー」に疲弊するのかやあ。Reactを書いていると、避けて通れないのが「Props Drilling(プロップス・ドリリング)」という名の泥沼だよね。親コンポーネントで定義し...
Propsによるデータの受け渡し(チルドレン属性、コンポーネントへの型付け)

【実務・中級編】 コンポーネント合成とchildrenの活用 – React実践ガイド

「props地獄」を卒業しよう。コンポーネント合成(Composition)で実現する、疎結合なUIアーキテクチャ現場でReactを書いていると、一度は経験するはずだ。「Props Drilling(プロップス・ドリリング)」。親から子、子...
Propsによるデータの受け渡し(チルドレン属性、コンポーネントへの型付け)

【実務・中級編】 Render Propsパターンの概念 – React実践ガイド

Render Props:なぜ「コンポーネントの責務」を関数に委ねるのか現場でコードを読んでいると、たまに「Propsとして関数を渡して、その戻り値をレンダリングする」という奇妙なコンポーネントに出会うことはないだろうか?そう、それが今回語...
Propsによるデータの受け渡し(チルドレン属性、コンポーネントへの型付け)

【実務・中級編】 関数をPropsとして渡すパターン – React実践ガイド

Reactのコールバックパターン: Propsで関数を渡すときに、プロが意識している「境界線」の話Reactの世界にどっぷり浸かっていると、「子コンポーネントにイベントハンドラを渡す」なんてのは呼吸をするのと同じくらい当たり前の作業になりま...
Propsによるデータの受け渡し(チルドレン属性、コンポーネントへの型付け)

【実務・中級編】 Propsの読み取り専用制約とreadonly修飾子 – React実践ガイド

Propsの「うっかり書き換え」を封じろ:TypeScriptとreadonlyが守る堅牢なReactコンポーネント現場でコードをレビューしていると、たまに見かけるんだ。「なぜここでPropsを直接いじってしまったのか?」という光景がね。R...
Propsによるデータの受け渡し(チルドレン属性、コンポーネントへの型付け)

【実務・中級編】 TypeScriptにおけるオプショナルPropsの定義 – React実践ガイド

なぜ「Propsのオプショナル」で事故が起きるのか?―TypeScriptとReactの危うい関係を制する現場でコードレビューをしていると、必ずと言っていいほど目にするのが「オプショナルPropsの扱い」にまつわる悲劇です。「この値はあって...
Propsによるデータの受け渡し(チルドレン属性、コンポーネントへの型付け)

【実務・中級編】 React.ReactElement型の詳細 – React実践ガイド

Reactの型定義、なんとなく`React.ReactNode`で済ませていないか?現場のコードレビューをしていると、Propsの型定義で思考停止してとりあえず `children: React.ReactNode` と書いているケースによ...
Propsによるデータの受け渡し(チルドレン属性、コンポーネントへの型付け)

【実務・中級編】 React.ReactNode型の役割 – React実践ガイド

React.ReactNodeの正体:なぜ「とりあえずこれ」と指定するのか、その深淵を覗く現場でコードをレビューしていると、コンポーネントのPropsに `children: React.ReactNode` を指定しているコードによく出会...
スポンサーリンク