การแยกไฟล์

• ใช้ pattern โดยขึ้นอยู่กับความซับซ้อนของ module/feature นั้นๆ

  • แบบง่าย คือรวม Logic, State, UI, และ Type ไว้ใน main เพียงไฟล์เดียว โดยที่ index ใช้เป็นเพียงตัว export เท่านั้น

    └── ../
        ├── index.tsx
        ├── <module-name>.main.css
        ├── <module-name>.module.css
        └── <module-name>.test.tsx

  • แบบซับซ้อน คือแยก Logic & State ไว้ที่ container, UI ไว้ที่ content, และ Type ไว้ที่ model โดยที่ index ใช้เป็นเพียงตัว export เท่านั้น

    └── ../
        ├── index.tsx
        ├── <module-name>.container.tsx
        ├── <module-name>.content.tsx
        ├── <module-name>.model.tsx
        ├── <module-name>.module.css
        └── <module-name>.test.tsx