# Architecture & Design Patterns (React / Next.js)

> โครงสร้าง feature-based, atomic design, clean architecture, หลักการ SOLID, dependency injection

- 22 คำถามสัมภาษณ์
- Senior
- [คำถามสัมภาษณ์: React / Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions.md)

## 1. Atomic Design ใน React คืออะไร?

**คำตอบ**

Atomic Design จัดระเบียบ component ของ React เป็น 5 ระดับลำดับชั้น: atoms (ปุ่ม, input), molecules (ฟอร์มอย่างง่าย), organisms (header, footer), templates (เลย์เอาต์หน้า) และ pages (instance ที่เป็นรูปธรรม) วิธีการนี้ให้โครงสร้างที่สอดคล้องและปรับขนาดได้สำหรับ design system ช่วยอำนวยความสะดวกในการนำ component กลับมาใช้ใหม่และการทำงานร่วมกันระหว่างนักออกแบบและนักพัฒนาโดยการแบ่งปันคำศัพท์ร่วมกัน

## 2. ลักษณะสำคัญของสถาปัตยกรรม feature-based คืออะไร?

**คำตอบ**

สถาปัตยกรรม feature-based รวมไฟล์ทั้งหมดที่เกี่ยวข้องกับฟังก์ชันการทำงานไว้ในโฟลเดอร์เดียวกัน (component, hooks, style, test, type) แนวทางนี้ส่งเสริม co-location และความเป็นอิสระของ feature แต่ละ feature กลายเป็นโมดูลอิสระที่มีความรับผิดชอบของตัวเอง ซึ่งช่วยให้การบำรุงรักษาง่ายขึ้นและช่วยให้ทีมทำงานแบบขนานได้โดยไม่มีความขัดแย้ง

## 3. หลักการพื้นฐานของ Clean Architecture คืออะไร?

**คำตอบ**

Clean Architecture อิงตาม Dependency Rule: การอ้างอิงต้องชี้เข้าด้านในเสมอ จากเลเยอร์ภายนอก (UI, โครงสร้างพื้นฐาน) ไปยังเลเยอร์ภายใน (domain, business logic) โดเมนธุรกิจต้องไม่พึ่งพา UI หรือ framework การแยกนี้ช่วยให้ทดสอบ business logic อย่างอิสระ เปลี่ยน framework โดยไม่ต้องเขียนโค้ดธุรกิจใหม่ และรักษาสถาปัตยกรรมที่แยกออกจากกันและปรับขนาดได้

## มีอีก 19 คำถาม

- หลักการ SOLID 'Single Responsibility' มีความหมายอย่างไรเมื่อนำไปใช้กับ React component?
- Dependency injection ใน React คืออะไร?

สมัครฟรี: https://sharpskill.dev/th/login

## หัวข้อสัมภาษณ์ React / Next.js อื่นๆ

- [พื้นฐาน JavaScript](https://sharpskill.dev/th/technologies/react-next/interview-questions/javascript-essentials.md): 25 คำถาม, Junior
- [พื้นฐาน React](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-fundamentals.md): 20 คำถาม, Junior
- [React Hooks](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-hooks.md): 22 คำถาม, Junior
- [วงจรชีวิตของ component](https://sharpskill.dev/th/technologies/react-next/interview-questions/component-lifecycle.md): 18 คำถาม, Junior
- [React Router](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-router.md): 20 คำถาม, Junior
- [การจัดการ state ด้วย Context](https://sharpskill.dev/th/technologies/react-next/interview-questions/state-management-context.md): 18 คำถาม, Junior
- [ฟอร์มและ Controlled Components](https://sharpskill.dev/th/technologies/react-next/interview-questions/forms-controlled-components.md): 20 คำถาม, Mid-Level
- [การดึงข้อมูลและ API](https://sharpskill.dev/th/technologies/react-next/interview-questions/fetching-data-api.md): 20 คำถาม, Mid-Level
- [React Query (TanStack Query)](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-query-tanstack.md): 20 คำถาม, Mid-Level
- [Styling & CSS-in-JS](https://sharpskill.dev/th/technologies/react-next/interview-questions/styling-css-in-js.md): 18 คำถาม, Mid-Level
- [พื้นฐาน Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-fundamentals.md): 25 คำถาม, Mid-Level
- [TypeScript กับ React](https://sharpskill.dev/th/technologies/react-next/interview-questions/typescript-react.md): 20 คำถาม, Mid-Level
- [การดึงข้อมูล Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-data-fetching.md): 24 คำถาม, Mid-Level
- [Server Actions ของ Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-server-actions.md): 20 คำถาม, Mid-Level
- [การกำหนดเส้นทางและการนำทางใน Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-routing-navigation.md): 22 คำถาม, Mid-Level
- [API Routes ใน Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-api-routes.md): 20 คำถาม, Mid-Level
- [Metadata & SEO ใน Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-metadata-seo.md): 18 คำถาม, Mid-Level
- [Middleware และ Auth ใน Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-middleware-auth.md): 22 คำถาม, Mid-Level
- [การทดสอบ React](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-testing.md): 20 คำถาม, Mid-Level
- [Zustand State Management](https://sharpskill.dev/th/technologies/react-next/interview-questions/zustand-state-management.md): 18 คำถาม, Mid-Level
- [การเพิ่มประสิทธิภาพ React](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-performance-optimization.md): 22 คำถาม, Senior
- [Error Boundaries & การจัดการข้อผิดพลาด](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-error-boundaries.md): 18 คำถาม, Senior
- [Advanced React Patterns](https://sharpskill.dev/th/technologies/react-next/interview-questions/advanced-react-patterns.md): 20 คำถาม, Senior
- [ฟีเจอร์ขั้นสูงของ Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-advanced-features.md): 24 คำถาม, Senior
- [การ Deploy & Production ของ Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-deployment-production.md): 20 คำถาม, Senior
- [React Server Components](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-server-components.md): 26 คำถาม, Senior
- [การแปลภาษา Next.js](https://sharpskill.dev/th/technologies/react-next/interview-questions/nextjs-internationalization.md): 20 คำถาม, Senior
- [React ความปลอดภัย & แนวปฏิบัติที่ดีที่สุด](https://sharpskill.dev/th/technologies/react-next/interview-questions/react-security-best-practices.md): 22 คำถาม, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/th/technologies/react-next/interview-questions/react-architecture-patterns