React コンポーネントとpropsを改めて理解

はじめに

reactってなんか便利な気がしているんだけど
いまいち理解できてない。。。

改めてドキュメントを読んでみて
腹落ちするか試してみた記録です

コンポーネント　=　1つの機能をまとめた塊

コンポーネントって言っても大きく2つあるらしい

関数コンポーネント

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

propsというオブジェクトを引数として受け取りReact要素を返している
→立派なReactコンポーネント

クラスコンポーネント

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Reactの視点から、上記2つは等価

コンポーネントを使っていざ、表示！

Reactではこういう宣言ができる

const element = <div />;

さらに、ユーザー定義のコンポーネントも表せる

const element = <Welcome name="Sara" />;

この時、下記のコードでは　"Hello, Sara"　を表示できる

Welcome関数コンポーネント

function Welcome(props) {
   return <h1>Hello, {props.name}</h1>;
 }
    //関数コンポーネントWelcomeを定義する

const root = ReactDOM.createRoot(document.getElementById('root'));
    //idがrootと設定されたDOM要素を指定し、Reactのrootを作成

const element = <Welcome name="Sara" />;
    //Welcome関数コンポーネントを実行し、props.nameに”Sara"を入れる

root.render(element);
    //elementを表示させる

コンポーネントpropsを使えばコードが整理される

下記は1つのコメントを返す、ソーシャルメディアサイトのコードの一例です。

Comment関数コンポーネント

function Comment(props) {
  return (
    <div className="Comment">
      <div className="UserInfo">
        <img className="Avatar"
          src={props.author.avatarUrl}
          alt={props.author.name}
        />
        <div className="UserInfo-name">
          {props.author.name}
        </div>
      </div>
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

なんだかごちゃごちゃしていて見にくいですね。
コンポーネントの修正にもかなり苦労しそうです。

コンポーネントとpropsを駆使すると。。。

Comment関数コンポーネント(修正後)

function Comment(props) {
  return (
    <div className="Comment">
      <UserInfo user={props.author} /> 　　　　　　　　　　←　コンポーネントを使ってる
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

UserInfo という関数コンポーネントにまとめたことで、
こんなにもスッキリ😊しました。

また中で使われているコンポーネントは下記のようになっています。

UserInfo関数コンポーネント

function UserInfo(props) {
  return (
    <div className="UserInfo">
      <Avatar user={props.user} />
      <div className="UserInfo-name">
        {props.user.name}
      </div>
    </div>
  );
}

※UserInfoはCommentの内側でレンダーされているということを知っている必要はない。
なのでpropsは props.user　でOK。Comment内と同じく、authorでなくてよい。

User Info の中の Avatar コンポーネントはこうなります。

Avater関数コンポーネント

function Avatar(props) {
  return (
    <img className="Avatar"
      src={props.user.avatarUrl}
      alt={props.user.name}
    />
  );
}

1つのファイルに書き切るのではなく、機能毎に分けることで、
コードの可読性と保守性があがります！

さいごに

コンポーネントの考え方を理解するのは少々苦戦しますが、
プロジェクトの全体像→徐々に深層に入っていく
というコードの読み方ができるようになるのでとても重要なようです。

ただし。。。書くには訓練が必要。
またコンポーネントで分けすぎるのと
逆に読みにくくなってしまう((深すぎたり広がりすぎる))ので
やりすぎ注意！ のようです。

まだ関数コンポーネントで分けるときと、クラスコンポーネントで分ける時
何が違うのかはふわっとしているので、
次回それについてもう少し調べてみようと思います。