Reactに入門した人のためのもっとReactが楽しくなるステップアップコース完全版

udemy学習

• 環境構築
  • https://zenn.dev/web_tips/articles/abad1a544f3643
• memo()で囲うと再レンダリングしない
  • 子コンポねーんとはmemo()で囲う
• アロー関数onClickCloseは新しく判定され、propsが変わっていると判定される。
  • よって子コンポーネントが更新される。
  • memo化が無効される。対策：useCallback

before：レンダリングされる

const [open, setOpen] = useState(false); // 要素の表示/非表示check

// ボタンクリックで非表示
const onClickClose = () => {
    setOpen(false);
  );
// openがかわったとき
...

<ChildArea open={open} onClickClose={onClickClose} />

after：レンダリングさせない

const [open, setOpen] = useState(false); // 要素の表示/非表示check

// ボタンクリックで非表示
const onClickClose = useCallback(() => {
    setOpen(false);
  }, [setOpen]);
// openがかわったとき
...

<ChildArea open={open} onClickClose={onClickClose} />

• styled-jsx
  • 一時的な？

<style jsx="true">
    {`
.button {
	        width: fit-content;
        text-align: center;
        margin: 0 auto;
      }
    `}
    </style>`}

• styled-components
  • sass同様に使える

まとめ

• inline style
• css modules
• styled jsx
• stryled componetns
• Emotion