React初心者によるアウトプット
自己紹介
SES企業勤務のフロントエンドエンジニアです。React/Next.js/Typescript中心に学習中です。
アウトプットの機会を増やし、自分自身の知識を増やすため、1月は平日毎日アウトプットすることが目標です。
Reactのレベル感
hooksを使用できる程度でredux等は、なにそれ?難しそう...というレベル感です。。
便利機能
React Developer Toolsという拡張機能でstateをリアルタイムで確認することが出来ます！
アウトプット
useStateについて
import React from "react";
でReactだけimportしている場合はReact.useState 、
import React, {useState} from "react";
のようにuseStateも個別にimportしている場合はuseState とReactを付けずに使います。
import文を極力シンプルにしたいのでこうしているのですが、個別にimportするとそのファイルで何のhookが使われているかが分かるので一長一短です。
イベントハンドラについて
わたしが最初躓いた部分として、e.target.valueが入るときと、set関数を渡す時の違いがわかりませんでした。
const handleClick = (e) => {
setCount(count + 1);
}
return (
<div>
<p>{count}</p>
<button onClick={handleClick}>増やす</button>
</div>
const handleClick = (e) => {
setCount(e.target.value)
}
とすると、ここには何も入ってこないので、この場合は、クリックされたタイミングで何か処理を実行する という意味のハンドラになります。
今回のようにカウントするため、数値の初期値を受け取りたいため、count+1という処理を記述するのが正しくなります！
最後に
アウトプットしつつ知識定着を図りたいと思い始めました。
7月から勉強中の初心者ですが、どうぞよろしくお願いいたします！