Zenn
🎉

実務で学んだReactのデザインパターンとTips

2021/10/02に公開
React
TypeScript
tech

はじめに

この記事は、ボク自身が開発しているプロジェクトで学んだ Reactのデザインパターン,JavaScriptの機能や Tipsの備忘録として、残しておきます。

props に関して

default props

コンポーネントの引数に初期値を定義することができます。

type Props = {
  color: string,
  text: string
}

const Button: React.VFC<Props> = ({ color = "red", text = 'text something here' }) => {
  return (
    <button style={color}>
        {text}
    </button>
  )
}

スプレッド構文とレスト構文

スプレッド構文とレスト構文は、JavaScriptの機能で、とても頻出です。
Reactのビルドインを理解するよりも、JavaScriptの理解を深めていく事が、実装での迷いを失くせるかもしれませんね。

1.スプレッド構文とは

スプレッド構文を使うと、関数呼び出しでは 0 個以上の引数として、Array リテラルでは 0 個以上の要素として、Object リテラルでは 0 個以上の key-value のペアとして、Array や String などの iterable オブジェクトをその場で展開します。

引用先: MDN Web Docs

2.レスト構文とは

分割代入 (Destructuring assignment) 構文は、配列から値を取り出して、あるいはオブジェクトからプロパティを取り出して別個の変数に代入することを可能にする JavaScript の式です。

引用先: MDN Web Docs

type ButtonProps = React.HTMLAttributes<HTMLButtonElement>

type Props = {
    color: string
} & ButtonProps;

const Button: React.FC<Props> = ({ color = "red", ...buttonProps }) => {
    return <button style={{ color }} {...buttonProps}>{children}</button>
}

props getters

ReactはCustom Hookがあり、それを応用してpropsを渡します。
jsxに直接、aria属性(aria-expanded) や Event属性(onClick)を記述するのではなく、 getter関数で複数のpropsを渡すようにします。

useStateで状態を定義し、getToggleProps関数で buttonタグのpropsを割り当てます。引数に...otherPropsを渡している理由は、この関数に新たにpropsを増やしたい場合、関数に変更せずに呼び出した側でpropsを引数に入れるためですね。

useButton.js
import { useState } from "react";
function useButton () {
    const [isOepn, setisOpen] = useState(false)
    const toggle = () => setisOpen(!isOepn)

    const getToggleProps = ({ onClick, ...otherProps } = {}) => ({
        'aria-expanded': isOpen,
        onClick: () => {
            onClick && onClick(isOpen)
            toggle(isOepn)
        },
        ...otherProps,
    })

    return {
        isOepn,
        getTogglerProps,
    };
}

Custom Hookを読み込み、buttonタグに渡しています

Usage.js
import { useButton} from "./useButton";

function Usage() {
  const {isOpen, getToggleProps} = useButton();

  return (
    <>
      <button {...getToggleProps()}>
          {isOpen ? "OPEN" : "CLOSE"}
      </button>
      <button {...getToggleProps({ disabled: true })}>
      </button>
    </>
  );
}

export { Usage };

さいごに

まだまだ実務で学んだことが沢山あるので、まとめていきたいなと思っています。
もしよければ、いいねを押してもらえると記事の執筆のモチベーションになりますので、ハートマークをクリックして欲しいです！

GitHubで編集を提案

Discussion