auの日記

プログラミング初心者の日記。(auはハンドルネームです)

Reactに出てくるpropsについて調べてみた

auです。

一度React Nativeを使ってアプリを作ったことがあるものの、Webサイトだと勝手が違うし、何より理解しながら作れていませんでした。

今度はコピペで動くものを作るより、自分で理解しながら作っていきたいと思うのでよく見かけるものから理解していこうと思います。

propsとは

公式にはこのように記述されています

コンポーネントとpropsというコンセプトの内容の一部です。

概念的には、コンポーネントJavaScript の関数と似ています。(“props” と呼ばれる)任意の入力を受け取り、画面上に表示すべきものを記述する React 要素を返します。

ja.reactjs.org

これを見て最初に感じたのは、「値を入れる変数のようなもの」ということです。
UIの状態・情報を管理し、値を保持する際に使われます。

ここで普通の変数と違うことは、propsの値は一度設定してから変更することができません。

そして、propsは親コンポーネントのデータを引数として受け取ることができます。

コンポーネントで引数を受け取る箱を用意して、親コンポーネントから値を渡して表示するイメージでしょうか。

どちらにせよ早く手を動かすしかなさそうですね。