Advanced Component ใน React

Advanced Component คืออะไร?

Advanced Component คือคอมโพเนนต์ใน React ที่มีความสามารถซับซ้อนขึ้น เช่น การจัดการ state หลายระดับ การรับ children แบบ dynamic การใช้ React Hooks ขั้นสูง หรือการออกแบบให้ reusable/composable ได้ดี เหมาะกับการสร้าง UI ที่ยืดหยุ่นและดูแลง่ายในโปรเจกต์ขนาดกลางถึงใหญ่

---

ตัวอย่างการสร้าง Advanced Component

1. การรับ children และ render แบบ dynamic

// Card.tsx
import React from "react";

type CardProps = {
  title: string;
  children: React.ReactNode;
};

export default function Card({ title, children }: CardProps) {
  return (
    <div className="border rounded p-4 shadow">
      <h2 className="font-bold mb-2">{title}</h2>
      <div>{children}</div>
    </div>
  );
}

// การใช้งาน
<Card title="Profile">
  <p>ชื่อ: Aom</p>
  <p>อายุ: 24</p>
</Card>;

2. การใช้ React Context (แชร์ state ข้าม component)

// ThemeContext.tsx
import React, { createContext, useContext, useState } from "react";

const ThemeContext = createContext({
  theme: "light",
  setTheme: (t: string) => {},
});

export function ThemeProvider({ children }: { children: React.ReactNode }) {
  const [theme, setTheme] = useState("light");
  return (
    <ThemeContext.Provider value={{ theme, setTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

export function useTheme() {
  return useContext(ThemeContext);
}

// การใช้งาน
import { ThemeProvider, useTheme } from "./ThemeContext";

function ThemeSwitcher() {
  const { theme, setTheme } = useTheme();
  return (
    <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
      เปลี่ยนธีม ({theme})
    </button>
  );
}

function App() {
  return (
    <ThemeProvider>
      <ThemeSwitcher />
    </ThemeProvider>
  );
}

3. Custom Hook (reuse logic)

import { useState } from "react";

export function useCounter(initial = 0) {
  const [count, setCount] = useState(initial);
  const inc = () => setCount(c => c + 1);
  const dec = () => setCount(c => c - 1);
  return { count, inc, dec };
}

// การใช้งานใน Component
function Counter() {
  const { count, inc, dec } = useCounter();
  return (
    <div>
      <button onClick={dec}>-</button>
      <span>{count}</span>
      <button onClick={inc}>+</button>
    </div>
  );
}

---

แนวคิด Composition และ Reusability

• Compound Component Pattern: เช่น <Tabs><Tabs.List/><Tabs.Panel/></Tabs>
• Render Props: ส่งฟังก์ชันเป็น props เพื่อควบคุม render
• Higher-Order Component (HOC): ฟังก์ชันที่รับคอมโพเนนต์แล้วคืนคอมโพเนนต์ใหม่

ปัจจุบันนิยมใช้ Custom Hook และ Compound Pattern มากกว่า HOC/Render Props

---

เปรียบเทียบกับ Component ธรรมดา

ประเด็น	Component ธรรมดา	Advanced Component
รับ children	ไม่ซับซ้อน	รับ children ได้อิสระ
แชร์ state ข้ามคอมโพเนนต์	ยาก	ทำได้ด้วย Context, Hook
Reuse logic	จำกัด	Custom Hook, Compound Pattern
ความยืดหยุ่น	น้อย	สูง
เหมาะกับ	UI ง่ายๆ	UI ซับซ้อน/ขยายต่อ

---

ข้อดี ข้อควรระวัง และแนวทางสมัยใหม่

ข้อดี

• สร้าง UI ที่ยืดหยุ่นและ reuse ได้จริง
• แยก logic ออกจาก UI ได้ดี (ผ่าน custom hook)
• ดูแลและขยายต่อได้ง่าย

ข้อควรระวัง

• อย่าออกแบบซับซ้อนเกินจำเป็น (YAGNI)
• ตั้งชื่อและจัดโครงสร้างให้เข้าใจง่าย

แนวทางสมัยใหม่

• ใช้ Function Component + React Hooks เป็นหลัก
• ใช้ TypeScript เพื่อ type safety
• นิยมใช้ Custom Hook, Compound Pattern มากกว่า HOC

---

สรุป

Advanced Component คือหัวใจของการสร้าง UI ที่ reusable, flexible และ maintainable ใน React สมัยใหม่ เรียนรู้และฝึกใช้แนวคิดเหล่านี้จะช่วยให้โปรเจกต์ของคุณเติบโตอย่างมีคุณภาพ