Reactで分割代入を実装する方法

Reactで分割代入をする方法

Reactで分割代入を利用する方法を紹介します。
以下のソースコード例では、コンポーネントのプロパティとステートの分割代入を行っています。

プロパティの分割代入

import React from 'react';

const Greeting = ({ name, age }) => {
  return (
    <div>
      <h1>こんにちは、{name}さん！</h1>
      <p>あなたは{age}歳です。
</p>
    </div>
  );
};

export default Greeting;

ステートの分割代入

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>現在のカウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>カウントアップ</button>
    </div>
  );
};

export default Counter;

この例では、Greetingコンポーネントでプロパティの分割代入を行い、Counterコンポーネントでステートの分割代入を行っています。
それぞれのコンポーネントは、親コンポーネントからのプロパティや自身のステートを分割代入して使用しています。