コンポーネント作ってたら腑に落ちたこと

オリジナルアプリを作り始めて早４ヶ月(時間かかりすぎ…)
コンポーネントを作っていたら急に自分なりの解釈が生まれたので忘れないように意を決して初ブログを書くことにしました！
自分なりの解釈なので内容に誤りなどあると思います。。
その時は優しく教えていただけると助かります😭

自己解釈①　Props

type HeaderLinkProps = {
  text: string;
  href: string;
  onClick?: () => void;
};

• コンポーネント内における登場人物の紹介みたいなもの。

• “？”が付くと登場しない可能性もある。

• void型は関数に定義することが多い

• コンポーネント名・型名はパスカルケース（HeaderLink）

• 変数・関数・Propsはキャメルケース（className）

自己解釈②　引数

export const HeaderLink = ({
  text,
  href,
  onClick,
}: HeaderLinkProps) 

• ここに書かれたProps（textなど）がコンポーネント内で使える。

• 上のPropsに“HeaderLinkProps”で定義した方を使用する。

• 前はここが何のことかわからなかった😇

自己解釈③　関数部分

=> {
  if (onClick) {
    return (
      <button
        type="button"
        onClick={onClick}
        className="font-medium text-[#DC143C] underline"
      >
        {text}
      </button>
    );
  }
  return (
    <div>
      <Link
        href={href}
        className="font-medium text-[#DC143C] underline"
      >
        {text}
      </Link>
    </div>
  );
};

• 今回はヘッダーリストを作っていたのでif文を使って「Propsに”onClick”があったらbuttonになる」ように実装しました。”onClick”がない場合はaタグ。

自己解釈④　コンポーネント呼び出し部分

              <HeaderLink
                text="ダッシュボード"
                href="/dashboard"
              />
              <HeaderLink
                text="ログアウト"
                href="/"
                onClick={handleLogout}
              />

• それぞれのPropsに①で定義したものを入力する。

• 定義したもの以外を入力するとエラーが出る（これが良い所）

おわりに

最後まで読んでいただきありがとうございました。
ShiftBには業界経験のある方が多いなか自分は未経験から転職を目指しています。
正直初めは参考書を読んでも全く理解ができませんでしたが、それでも挫折せずに悩んで書いて質問してを繰り返してたら、自分の解釈ではあるけれど少しは理解できるようになってきました！
インプットだけでなくアウトプットして定着させられように今後も挫折せず転職まで頑張ろうと思います。

最後に…内容に誤りや改善点などがあったら遠慮なく指摘してください🙇