DevD | Interactive Learning

พจนานุกรมปูพื้นฐานส่วนประกอบเลโก้ (Component Dictionary)

มาสำรวจปูคำศัพท์เทคนิคชิ้นส่วน React ที่จำเป็นต่อการพัฒนาหน้าจอเว็บกันก่อน:

1. Component (ชิ้นส่วนประกอบ)

บล็อกตัวต่อเลโก้ชุดคำสั่งที่มัดโครงสร้าง HTML, ความสวยงาม CSS, และกลไกคิด JavaScript รวมไว้ที่ตัวเดียวกันเพื่อนำมา Reuse ซ้ำได้อย่างไม่รู้จบ

2. Props (คุณสมบัตินำทางค่า)

กล่องของขวัญข้อมูลตัวแปรที่โยนส่งผ่านจาก Component แม่เข้าไปสู่ Component ลูก เพื่อบอกให้ปรับความสวยงามหรือคำบรรยายตามประสงค์

3. Component Tree (แผนผังต้นไม้ส่วนประกอบ)

ภาพแผนภูมิลำดับความสัมพันธ์ที่สะท้อนว่ามี Component ตัวไหนอยู่ภายใต้การสืบทอดหรือการดูแลของใครบ้างในภาพรวมหน้าเว็บ

4. JSX (ลูกผสมเว็บเขียนง่าย)

ไวยากรณ์พิเศษของ React ที่ช่วยย่นระยะเวลาให้คุณพิมพ์โครงสร้างดีไซน์ผสมเข้าไปในหัวใจการทำงานของจาวาสคริปต์ได้โดยตรง

1นรกของการ "ก๊อปปี้แปะ" (Copy-Paste Hell)

ลองจินตนาการว่าคุณกำลังทำเว็บขายของที่มีสินค้า 100 ชิ้น ในยุคก่อนที่เราจะมี React โปรแกรมเมอร์จะต้องเขียน HTML หน้าตาการ์ดสินค้า (รูปภาพ, ชื่อ, ราคา, ปุ่มกดซื้อ) แล้ว ก๊อปปี้โค้ดชุดนั้น 100 รอบ เพื่อแสดงสินค้า 100 ชิ้น

ปัญหาที่ตามมาคือ...

วันดีคืนดี หัวหน้าเดินมาบอกว่า "ช่วยเปลี่ยนคำว่า 'ซื้อเลย' เป็น 'หยิบใส่ตะกร้า' ให้หน่อยสิ"

ความยุ่งยากจะเกิดขึ้นทันที! เพราะต้องไล่เปิดไฟล์ไปแก้บรรทัดนั้น 100 จุด แถมถ้าแก้ตกหล่นไปแค่จุดเดียว หน้าเว็บก็จะมีปุ่มที่หน้าตาไม่เหมือนเพื่อนอยู่ 1 อัน นี่คือฝันร้ายของการเขียนโปรแกรมเลย

2Component คืออะไร? ทำไมมันถึงเจ๋ง?

Component แปลตรงตัวว่า "ส่วนประกอบ" ในโลกของ React เราจะมองหน้าเว็บทั้งหมดเป็น "ตัวต่อเลโก้ (Lego)"แทนที่เราจะเขียนโค้ดซ้ำๆ เราจะเขียนโค้ด การ์ดสินค้า 1 ใบ เก็บไว้ในไฟล์แยกต่างหาก (เรียกว่าการสร้าง Component กลาง)

พอเราอยากโชว์สินค้า 100 ชิ้น เราก็แค่เอา Component ตัวนี้มา ปั๊มตรา (Reuse) วางซ้ำๆ 100 รอบแทน!

และถ้าหัวหน้าสั่งแก้คำบนปุ่ม? เราก็แค่เดินไปแก้ที่ไฟล์ Component ต้นแบบ เพียง 1 จุด (1 ไฟล์) แล้วการ์ดสินค้าทั้ง 100 ชิ้นบนหน้าเว็บ จะเปลี่ยนคำตามต้นแบบทันที! ✨

เปรียบเทียบการก๊อปโค้ด VS การใช้ Component

ลองกดปุ่มด้านล่างเพื่อเทียบดูปริมาณโค้ดที่ต้องเขียน เมื่อเราต้องแสดงสินค้า 3 ชิ้น จะเห็นชัดเจนว่าแบบ Component โค้ดสั้นและเป็นระเบียบกว่ามาก!

💻 Code EditorLines: 5

return (

</div>

);

ร้านค้า (Shop)

ยังไม่มีสินค้า

แบบเก่า: โค้ดยาวมากและซ้ำซ้อน ถ้าจะแก้ปุ่ม "ซื้อ" ต้องตามไปแก้ทุกจุด ทำให้บัคเกิดง่าย

3Props (Properties) ตัวเปลี่ยนสีให้เลโก้

หลายคนอาจจะมีคำถามว่า "ถ้าเราใช้ Component เดียวกันหมด หน้าตาข้อมูลมันก็เหมือนกันเป๊ะเลยสิ แล้วสินค้าจะชื่อต่างกันได้ไงล่ะ?"

คำตอบคือ Props (พรอบส์)!
Props คือ "ข้อมูลที่เราโยนเข้าไปใน Component" เพื่อสั่งให้มันเปลี่ยนแปลงรูปร่างหน้าตา เช่น เราโยน Prop ชื่อสินค้า, ราคาสินค้า, และรูปภาพเข้าไปในเลโก้ชิ้นเดิม มันก็จะคายตัวเลโก้ที่หน้าตาต่างกันออกมา

การเรียกใช้งาน Component (หน้าแรก)
// เราเรียกใช้ <ProductCard /> 2 ครั้ง แต่ส่ง Props ที่ต่างกันเข้าไป!
return (
  <div className="shop">
  
    <ProductCard 
      name="หมวกแก๊ป" 
      price="250" 
      color="red" 
    />
    
    <ProductCard 
      name="กระเป๋าเป้" 
      price="890" 
      color="blue" 
    />
    
  </div>
);

แค่นี้เราก็จะได้การ์ด 2 ใบที่มีสไตล์ (สี, กรอบ, ปุ่ม) เหมือนกันเป๊ะ แต่แสดงข้อมูลต่างกันแล้ว

ลองโยน Props ด้วยตัวเอง (Interactive Props)

ลองเปลี่ยนค่าทางฝั่งซ้ายมือ (หน้าหลัก) แล้วสังเกตว่ามันถูกส่งข้ามไปเปลี่ยนรูปร่างหน้าตาของการ์ดทางฝั่งขวามือ (Component) อย่างไร

หน้าหลัก (Parent)

กำหนดค่า Props

prop: name (String)

prop: role (String)

prop: theme (Color)

prop: showAvatar (Boolean)

ProfileCard (Child)

Props

สมชาย ใจดี

Developer

4ต้นไม้แห่ง Component (Component Tree)

เมื่อมีเลโก้หลายๆ ชิ้น ก็นำมารวมกันประกอบเป็นรูปร่างต่างๆ ได้ ในโลกของเว็บไซต์ก็เช่นกัน เราจะเอา Component ชิ้นเล็กชิ้นน้อย (ปุ่ม, รูปภาพ) มาประกอบร่างกันเป็น Component ชิ้นที่ใหญ่ขึ้น (การ์ดสินค้า, แถบเมนู) และเอาชิ้นใหญ่ๆ ไปประกอบเป็น "หน้าเว็บ 1 หน้า"

โครงสร้างของหน้าเว็บ (UI Tree)

<Page /> (หน้าเว็บหลัก)

การออกแบบโครงสร้างที่ดี จะทำให้ Component ของเราถูกนำไปใช้ซ้ำได้บ่อยขึ้น และช่วยลดขนาดไฟล์ของเว็บไซต์ลงได้อย่างมหาศาลเลย

5ชำแหละโค้ด: การสร้าง Component ต้นแบบ

แล้วไฟล์ต้นแบบหน้าตาเป็นอย่างไร? ในโลกของ React สมัยใหม่ Component จะถูกเขียนขึ้นด้วย ฟังก์ชันของ JavaScript (Function Component) ที่รอรับ Props และตอบกลับ (return) ออกมาเป็นหน้าตา HTML (ที่เรียกว่า JSX):

components/ProductCard.tsx
// ฟังก์ชันชื่อ ProductCard รับของขวัญ (Props) 3 ชิ้นเข้ามา
export default function ProductCard({ name, price, color }) {

  // เอาข้อมูลจาก Props มาแปะลงใน HTML (JSX)
  return (
    <div className="card-box">
      <div className={`icon-color-${color}`}>รูปสินค้า</div>
      <h2>{name}</h2>
      <p>ราคา: {price} บาท</p>
      <button>ซื้อเลย</button>
    </div>
  );
  
}

6ตัวอย่าง Component กลาง ที่เจอบ่อยในแอปจริง

Navbar & Footer (แถบเมนู)

แถบเมนูด้านบน และที่อยู่บริษัทด้านล่างสุดของเว็บ เป็น Component ที่ถูกเขียนเพียงแค่ไฟล์เดียว แล้วโดนดูดไปแสดงผลในทุกๆ หน้าของเว็บไซต์

UI Elements (ปุ่ม, ฟอร์ม)

พวกปุ่มกดยืนยันสีต่างๆ, กล่องกรอกรหัสผ่าน, หรือ Checkbox มักจะถูกทำเป็น Component กลาง เพื่อให้ทั้งทีมโปรแกรมเมอร์หยิบไปใช้ได้ โดยที่หน้าตาเว็บยังคงเป็นไปในทิศทางเดียวกันทั้งหมด

Component กลาง
เลิกก๊อปแปะ แล้วมาต่อเลโก้กัน!