propsの基本（React）

はじめに

Reactのコンポーネント間で値をやり取りする場合の方法の一つであるpropsについて学んだので、備忘録として使用例を交えながら解説を残したい。（間違っていたらコメント下さい。修正します。）

そもそもReactのpropsとは。

簡潔に言うと、"コンポーネント間の値のやり取りを可能にするもの"です。

useStateとの違い

似たような状態の管理方法に、useStateがありますが、useStateで管理できるのはコンポーネント内の値だけなのでコンポーネントを跨いでグローバルに値をやり取りする場合にはpropsやcontextなど、他の方法で対応する必要があります。

イメージとして、、

具体的には、親コンポーネントから子コンポーネントへデータを渡すことが可能で、イメージとしては、川の上流の家(親コンポーネント)から下流の家（子コンポーネント）へ向かって船に乗った人（props）が新聞（値）を渡していく感じでしょうか。

使用例(基本)

基本的な使用例を以下にまとめます。

構造

src
├─ App
└─ Test

App（親コンポーネント）

App

import Test from "./Test";
export default function App() {
 const Testdate: string = "test";
  return (
    <div>
      <Test date={Testdate} />
    </div>
  );
}

Test（子コンポーネント）

interface TestProps {
  date: string;
}
export default function Test(props: TestProps) {
  return (
    <div>
        <p>{props.date}</p>
    </div>
  );
}

出力結果

test

解説

• App
  親コンポーネントであるAppでは、const Testdate: string = "test";で渡したい値を定義しています。今回は文字列型"test"をTestdataに格納しています。
  また、return ( <div> <Test date={Testdate} /> </div> );でpropsとして渡す値（Testdata変数）を定義しています。
• Test
  子コンポーネントであるTestでは、インタフェースでデータ型を定義しておき、それを引数に与えます。function Test(props: TestProps) {
  returnとして、<p>{props.date}</p>{props.date}を呼び出すことで親コンポーネントからデータが取得できます。
• 出力結果
  親コンポーネント(App)のTestdateに格納したtestが子コンポーネントであるTestに渡されて出力されました。

確認

当たり前ですが、<p>{props.date}</p>を削除すると、何も出力されません。

Test.tsx

interface TestProps {
  date: string;
}
export default function Test(props: TestProps) {
  return (
    <div></div>
  );
}

渡す値を変えてみる

const Testdate: string = "Hello";Testdateに格納する文字を"Hello"に変更すると、出力結果が変わります。

App.tsx

import Test from "./Test";
export default function App() {
  const Testdate: string = "Hello";
  return (
    <div>
      <Test date={Testdate} />
    </div>
  );
}

出力結果
Hello

学べたこと

• propsを使用したコンポーネント間の値のやり取りを学ぶことができた。
• コンポーネント設計の重要性が少しわかった気がする。