👻

useStateと仲良くなりたい

2024/08/09に公開

React

TypeScript

tech

👤対象者

useStateをカウンター以外で使いたい
簡単なものでいいから理解する。

useStateとは、Reactのstate(状態を管理する)、フックです。ただ関数かな。使う場面は、UI stateの更新ですね。画面が切り替わる。カウントされる。

/**
 * 
 * @returns 
 * What is useState?
 * stateと、state更新関数を返すフック
 * コンポーネントないでstate管理ができる
 * stateとは、UIに表示されるデータやUIの状態などアプリケーションが保持している情報（データや値）
 */

カウンターは見飽きてるので、違うものを作って理解を深める。

👻お化けを表示する

三項演算子、? :と、boolean型のuseStateを使って画面切り替えるロジックを作ってみました。ボタンを押してない状態の時は、「お化けいないよ」と表示されます。押すと、👻の絵文字が表示されます。

最初の状態:

ボタンを押した後の状態:

import { useState } from "react"
import styled from "styled-components"

const Goast = styled.h1`
    font-size: 1.5em;
`

const ClickMe = () => {
  const [show, setShow] = useState<boolean>(false);

  const handleClick = () => {
    setShow(prevShow => !prevShow);
  }

  return (
    <div>
        { show ? <Goast>👻</Goast> : <p>お化けいないよ</p> }
        {
            show ?
            <button onClick={() => handleClick()}>お化けでた笑</button>
            :
            <button onClick={() => handleClick()}>クリックしてね</button>
        }
    </div>
  )
}

export default ClickMe

コードの説明をすると、ボタンをクリックすると、表示切り替えが行われるので、Toggleしてるイメージですね。trueの時は、左のコードを表示。falseのときは、右側のコードを表示します。

感想

やってみたことは、useStateによる、UI Stateの更新。モダンJavaScriptの三項演算子で分岐処理をしているところですね。Reactは難しいと言われていますが、ライフサイクルを理解すれば、簡単なものを作ることはできるようになると思います。

👤対象者

👻お化けを表示する

感想

Discussion