ทำไมต้องวนลูปข้อมูลใน React?
เวลาเราเขียนเว็บ เรามักจะเจอสถานการณ์ที่มีข้อมูลชุดใหญ่ เช่น รายชื่อสินค้าหรือรายชื่อเพื่อนในแอป แทนที่เราจะเขียนโค้ดแสดงผลทีละตัว เราจึงต้องใช้การ Rendering Lists (การแสดงผลข้อมูลที่เป็นรายการ) เข้ามาช่วย
ลองนึกภาพว่าคุณกำลังจัดของใส่กล่อง ถ้าคุณมีของ 100 ชิ้น การหยิบใส่ทีละชิ้นคงเหนื่อยมาก การวนลูป (Loop) ก็เหมือนการสั่งให้หุ่นยนต์หยิบของใส่กล่องให้เราโดยอัตโนมัติ ไม่ว่าข้อมูลจะมีกี่ชิ้น หุ่นยนต์ตัวนี้ก็จะจัดการแสดงผลให้เราจนครบเสมอ
ใน React เราจะใช้ฟังก์ชันที่ชื่อว่า .map() ซึ่งเป็นเครื่องมือที่เอาไว้แปลงข้อมูลหนึ่งชุดให้กลายเป็นอีกชุดหนึ่ง การใช้ .map() จะช่วยให้โค้ดของคุณสั้นลงและอ่านง่ายขึ้นมาก ไม่ต้องคัดลอกโค้ดเดิมซ้ำๆ ให้รกสายตา
การใช้ .map() วนลูปข้อมูลใน TypeScript
เมื่อเราใช้ TypeScript (ภาษาโปรแกรมที่เพิ่มระบบตรวจสอบความถูกต้องของข้อมูล) เราจำเป็นต้องบอกให้คอมพิวเตอร์รู้ว่า ข้อมูลที่อยู่ในรายการคืออะไรบ้าง เพื่อป้องกันไม่ให้เกิดบั๊ก (ข้อผิดพลาดในโค้ด) ในอนาคต
ก่อนอื่นเราต้องสร้าง Interface (การกำหนดโครงสร้างของข้อมูล) เพื่อระบุว่าใน Object แต่ละตัว ต้องมีข้อมูลหน้าตาเป็นอย่างไรบ้าง นี่คือวิธีเขียนที่ถูกต้องและปลอดภัยที่สุดสำหรับโปรแกรมเมอร์มืออาชีพ
// กำหนดโครงสร้างข้อมูลด้วย Interface
interface User {
id: number;
name: string;
}
// ข้อมูลตัวอย่างที่เก็บไว้ใน Array
const users: User[] = [
{ id: 1, name: "สมชาย" },
{ id: 2, name: "สมหญิง" }
];
// การวนลูปแสดงผล
const UserList = () => (
<ul>
{users.map((user) => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
ในตัวอย่างนี้ เรากำหนดให้ users เป็น Array (ชุดข้อมูลที่เก็บค่าหลายๆ ตัวไว้ด้วยกัน) ของ User จากนั้นใช้ .map() เพื่อเปลี่ยนข้อมูลแต่ละตัวให้เป็นแท็ก <li> ของ HTML
ความสำคัญของ Unique Key ที่ห้ามมองข้าม
ทุกครั้งที่เราวนลูปใน React เราต้องใส่ Unique Key (รหัสประจำตัวที่ไม่ซ้ำกันของข้อมูลแต่ละรายการ) เสมอ ถ้าเราไม่ใส่ React จะแจ้งเตือนด้วยตัวหนังสือสีแดงในหน้า Console (หน้าต่างแสดงสถานะการทำงานของเบราว์เซอร์) เพื่อบอกว่ามันทำงานได้ไม่เต็มประสิทธิภาพ
คิดซะว่า key เหมือนเลขบัตรประชาชนของข้อมูลแต่ละตัว ถ้าทุกคนไม่มีเลขประจำตัว เวลา React อยากจะแก้ไขหรือลบข้อมูลตัวไหน มันจะงงว่าต้องทำกับตัวไหนกันแน่ การระบุ key จึงช่วยให้ React ทำงานได้เร็วและแม่นยำขึ้น
ข้อควรระวัง คือห้ามใช้เลขลำดับ (index) ของ Array มาเป็น key โดยเด็ดขาดถ้าข้อมูลมีการเปลี่ยนแปลงลำดับได้ เพราะมันจะทำให้การจัดการหน้าจอผิดพลาด ให้ใช้ค่าที่ไม่มีวันซ้ำกันอย่าง id จากฐานข้อมูลแทนเสมอ
จุดที่มือใหม่มักพลาดและวิธีแก้
ข้อผิดพลาดที่เจอบ่อยที่สุดคือการลืมใส่ key หรือการใส่ key ที่ซ้ำกันในรายการข้อมูล หากคุณเจอปัญหาหน้าจอไม่ยอมอัปเดตข้อมูล หรือข้อมูลแสดงผลสลับกัน ให้กลับมาเช็กที่ค่า key เป็นอันดับแรก
อีกเรื่องคือการลืมกำหนด Type (ชนิดของข้อมูล) ให้กับตัวแปรที่รับค่ามาจาก .map() ถ้าคุณปล่อยให้เป็น any (ชนิดข้อมูลอะไรก็ได้) จะทำให้ TypeScript ไม่สามารถช่วยเตือนคุณได้เมื่อพิมพ์ชื่อตัวแปรผิด
วิธีแก้คือการตรวจสอบเสมอว่าข้อมูลที่ได้มามีโครงสร้างตรงกับ interface ที่ตั้งไว้ไหม ถ้าข้อมูลมาจาก API (ช่องทางเชื่อมต่อข้อมูลระหว่างโปรแกรม) ให้ใช้การตรวจสอบข้อมูลให้ดีก่อนจะเอาไปแสดงผลบนหน้าจอ การเขียนโค้ดให้รัดกุมตั้งแต่ต้น จะช่วยลดเวลาแก้บั๊กได้มหาศาล
สรุป: นำไปใช้ในโปรเจกต์จริง
การวนลูปข้อมูลเป็นพื้นฐานสำคัญที่สุดอย่างหนึ่งในการทำเว็บแอปพลิเคชัน ไม่ว่าคุณจะทำหน้าแสดงรายการสินค้า รายการข้อความแชท หรือรายการผู้ใช้งาน ทั้งหมดนี้ใช้หลักการเดียวกันคือ .map() ร่วมกับ key ที่ไม่ซ้ำกัน
ลองฝึกฝนด้วยการสร้างโปรเจกต์เล็กๆ เช่น แอปรายการสิ่งที่ต้องทำ (To-do List) เริ่มจากการเก็บข้อมูลในรูปแบบ Array ของ Object แล้วลองใช้ .map() แสดงผลออกมาบนหน้าจอ อย่าลืมใส่ id ให้ข้อมูลแต่ละตัวและนำไปใช้เป็น key ในทุกครั้ง
ถ้าทำจนคล่องแล้ว ให้ลองเพิ่มเงื่อนไขในการแสดงผล เช่น แสดงเฉพาะข้อมูลที่ยังทำไม่เสร็จด้วย .filter() (คำสั่งกรองข้อมูล) การฝึกแบบนี้จะทำให้คุณเข้าใจการจัดการข้อมูลใน React ได้ลึกซึ้งยิ่งขึ้น และพร้อมสำหรับการทำงานจริงในทีมพัฒนาซอฟต์แวร์ครับ
