概要
入社してまだ間もない駆け出しエンジニアです。
学んだことのアウトプット＋備忘録として、記事を書いていきます！
今回はReactを学んでいく中で理解しておきたい、propsとstateの2つの概念を自分なりに説明します。
propsとは？
Reactでは親コンポーネントから子コンポーネントへのデータの受け渡しにpropsが使用され
ます。
子コンポーネント内でpropsは読み取り専用であり、後から変更することはできません。
子コンポーネントが親コンポーネントから渡されたpropsを受け取る方法として、
「引数にpropsを書く」「分割代入する」という2つの記述方法があります。
以下よりコードで具体的に説明していきます。
分割代入
import Noob from "./noob";
// 親コンポーネント
const App = () => {
return <Noob name="太郎" year={1} />;
};
export default App;
type NoobProps = {
name: string;
year: number;
};
// 子コンポーネント
const Noob = ({ name, year }: NoobProps) => {
return (
<div>
<p>こんにちは{name}さん</p>
<p>入社{year}年目です</p>
</div>
);
};
export default Noob;
import ReactDOM from "react-dom/client";
import App from "./App";
const root = ReactDOM.createRoot(document.getElementById("root")!);
root.render(<App />);
ここでは親コンポーネントであるAppでpropsというオブジェクトのnameとyearというプロパティが子コンポーネントであるNoobに渡されています。
Noobコンポーネントでは、渡されてきたpropsオブジェクトのnameとyearを引数として受け取り、以下のようにレンダリングしています。
return (
<div>
<p>こんにちは{name}さん</p>
<p>入社{year}年目です</p>
</div>
);
つまり分割代入では、propsオブジェクト内のnameとyearというプロパティを直接受け渡ししているということになります。
propsを直接記述
また、分割代入を使わずにpropsを記述する渡し方では、
const Noob = (props: NoobProps) => {
return (
<div>
<p>こんにちは{props.name}さん</p>
<p>入社{props.year}年目です</p>
</div>
);
};
propsオブジェクト全体を受け取り、その中から必要なプロパティを取り出して使用します。
この場合だと、props.*のように記述するため、props.と書く手間が発生します。そのため複数のpropsを受け渡す際は少し読みにくいコードになると思います。
propsまとめ
propsとは親コンポーネントから子コンポーネントへ受け渡す際に使われるものです。
propsの受け渡し方については、分割代入を使ったほうがわかりやすく読みやすいコードになる場合が多いと思うので、僕は分割代入を主に使いたいと思います。
stateとは？
簡単に言えば、各コンポーネントごとの状態を管理するためのものです。
propsとの違いとして、コンポーネント内でユーザーの操作やイベントに応じて変更されることがあります。
stateは変更できるとありますが、ではそのstateの管理はどのように行うのでしょうか？
それはReactHooksの中の一つ、useStateを使用して行います。
以下よりコードで具体的に説明していきます。
stateの変更
まず、useStateを使うには以下のような形で記述します。
const [state変数, state更新の関数] = useState(初期値);
実際に簡単なものを書いてみます。
import { useState } from "react";
const StateButton = () => {
const [count, setCount] = useState<number>(0);
const handleCount = () => {
setCount(count + 1);
};
return (
<>
<p>現在のカウントは{count}</p>
<button onClick={handleCount}>+1</button>
</>
);
};
export default StateButton;
countというstateを宣言して、ボタンが押された際にhandleCount関数が実行され、setCount関数が呼び出されてカウントが1増えます。
また、countはsetCountが呼び出されてすぐに変更されているわけではありません。
const handleCount = () => {
setCount(count + 1);
console.log(count);//この時点ではcountは更新されていない！！
};
useStateの値は再レンダリングの後に更新されます。
再レンダリングとは
再レンダリングについては以下の記事を参考にしてみてください。
stateまとめ
stateとはReactにおいて各コンポーネントの状態を管理するためのものです。
そのstateを関数コンポーネントで作成する際にuseStateを使用します。
参考
Discussion