React基礎
■CodeSandBox（一番便利）
■Json Place Holder
https://jsonplaceholder.typicode.com/
https://jsonplaceholder.typicode.com/users?id=1
■Reactフック チートシート
useState / useEffect / useReducer / useRef / useCallBack / useMemo / custom Hook
の使い方の一例を見ることができる。
https://chott-works.com/tips/ReactCheetSheet
■フック API リファレンス
https://ja.reactjs.org/docs/hooks-reference.html#usestate
■useEffect
[ ]
「関数コンポーネント内で副作用（side-Effect）を実行するためのHookです。副作用とは、関数コンポーネントの出力（レンダリング）に関係ない処理のことです。つまり、useEffectを用いることでレンダリングと副作用を切り離すことが可能になります。」
とのこと。
[ ]
[ ]
■StateとPropsの違い
（参考URL）https://post-output.com/react-state-props/
stateとは
stateはクラスコンポーネント内で情報を保有することができるオブジェクトのことです。
例えば、ページ内に時計を表示させているコンポーネントが存在すると仮定します。ページ内で時計の表示を変える際、時刻が変わるたびにrender()メソッドを呼び出すのは効率的ではありません。
そこで、時刻の情報をもつstateを用意すると、stateの値を変えることで表示を変えることができ、効率的に実装することができます。
propsとは
Propsの理解を進める前に、Reactのコンポーネントについて確認します。
Reatに限らず、コードを再利用したい場合はそのコードの内容を関数として定義し、その関数に引数として値を渡すことで、処理内容を動的に変えることができます。
Reactにおけるコンポーネントは、JSXを返す関数だと考えるのがよいです。
そして、Propsは関数の引数と考えるのがイメージがつきやすいです。以下のコードを確認しましょう。
interface Props {
n1 :number
n2 :number
}
function OutputProps(props: Props) {
return(
<div>
First value is {props.n1}<br />
Second value is {props.n2}
</div>
)
上記のコードは、引数にpropsを受け取るOutputPropsという関数を表しています。この関数(コンポーネント)の呼び出しは、以下のようになります。
<OutputProps n1={1} n2={2} />
OutputProps関数(コンポーネント)を呼び出し、引数に2つの値を渡しています。出力結果は以下のようになります。
First value is 1 Second value is 2
引数で渡した値を、コンポーネント側(function OutputProps)でpropsとして受け取り、出力させています。
stateとpropsの違い
