ファイルにコンポーネントが散らばった

覚書です。

ディレクトリで整理するほどでもないけど、細かく仕分けたら一つのファイルに大量のコンポーネントが散乱してしまったときの対処法です。画面に表示されるコードが少なくなります。
IDEやテキストエディタなどに付属しているコード領域の展開/折り畳みの機能がないとあまり効果を発揮できません。

import React from 'react'
import styled from '@emotion/styled'

const Hoge = {
  Wrapper: <div>...</div>,
  P: styled.p`
    ...;
  `,
}

const HogePage: React.VFC = () => (
  <Hoge.Wrapper>
    <Hoge.P>hoge</Hoge.P>\
  </Hoge.Wrapper>
)

これでHogeオブジェクトでコードの折り畳み機能を使うと一行にまとまってくれるので画面がスッキリします。
ランディングページ等で活躍します。