รู้จักกับ Props: ส่งข้อมูลระหว่าง Components

รู้จักกับ Props: ส่งข้อมูลระหว่าง Components

จากบทที่แล้ว เราได้เรียนรู้เกี่ยวกับ Component พื้นฐานอย่าง View, Text, และ Image กันไปแล้ว ในบทนี้ เราจะมาทำความรู้จักกับอีกหนึ่งแนวคิดที่สำคัญมากๆ ใน React Native นั่นก็คือ Props ครับ

Props คืออะไร?

Props (มาจากคำว่า "properties" ในภาษาอังกฤษ) เปรียบเสมือน "คุณสมบัติ" หรือ "ข้อมูล" ที่เราสามารถส่งจาก Component หนึ่ง (Parent Component หรือ Component แม่) ไปยังอีก Component หนึ่ง (Child Component หรือ Component ลูก) ได้ครับ ลองจินตนาการว่า Component แม่กำลัง "ให้" ข้อมูลบางอย่างกับ Component ลูก เพื่อให้ Component ลูกสามารถนำข้อมูลนั้นไปใช้ในการแสดงผลหรือทำงานบางอย่างได้

Props เป็นข้อมูลที่ อ่านได้อย่างเดียว (read-only) หมายความว่า Child Component ไม่สามารถเปลี่ยนแปลงค่าของ Props ที่ได้รับมาได้ การเปลี่ยนแปลงข้อมูลจะต้องทำที่ Parent Component แล้วส่ง Props ใหม่มาให้ Child Component อีกครั้ง นี่เป็นหลักการสำคัญที่ช่วยให้ข้อมูลในแอปพลิเคชันของเรามีความสอดคล้องและคาดเดาได้ง่าย

ทำไมต้องใช้ Props?

การใช้ Props ช่วยให้เราสร้าง Component ที่มีความยืดหยุ่นและนำกลับมาใช้ใหม่ได้ (reusable components) ครับ ลองนึกภาพว่าเราต้องการสร้าง Component สำหรับแสดงชื่อผู้ใช้งาน เราสามารถส่งชื่อของผู้ใช้งานแต่ละคนผ่าน Props ได้ ทำให้เราไม่ต้องสร้าง Component ใหม่สำหรับผู้ใช้งานแต่ละคน

นอกจากนี้ Props ยังช่วยให้เราแยกส่วนการทำงานของแอปพลิเคชันออกเป็น Component ย่อยๆ ได้ง่ายขึ้น ทำให้โค้ดของเรามีความเป็นระเบียบและง่ายต่อการบำรุงรักษา

การส่ง Props จาก Parent Component

การส่ง Props ทำได้โดยการกำหนด attribute ให้กับ Child Component ใน JSX เหมือนกับการกำหนด attribute ให้กับ HTML element ทั่วไปครับ ตัวอย่างเช่น:

import React from 'react';
import { View, Text } from 'react-native';

const Greeting = (props) => {
  return (
    <View>
      <Text>สวัสดี, {props.name}!</Text>
    </View>
  );
};

const App = () => {
  return (
    <View>
      <Greeting name="สมชาย" />
      <Greeting name="สมหญิง" />
    </View>
  );
};

export default App;

ในตัวอย่างนี้ เราได้สร้าง Component ชื่อ Greeting ซึ่งรับ Props ชื่อ name จากนั้นใน Component App (ซึ่งเป็น Parent Component) เราได้ส่ง Props name ที่มีค่าเป็น "สมชาย" และ "สมหญิง" ให้กับ Greeting Component ทั้งสองตัว

สังเกตว่าเราส่ง Props โดยการกำหนด attribute name ให้กับ Greeting Component และกำหนดค่าให้กับ attribute นั้นๆ ครับ

การรับ Props ใน Child Component

ในการรับ Props ใน Child Component เราจะใช้ argument ของ Function Component หรือ this.props ใน Class Component ครับ ในตัวอย่างข้างต้น เราได้สร้าง Function Component ชื่อ Greeting ซึ่งรับ argument ชื่อ props จากนั้นเราสามารถเข้าถึงค่าของ Props name ได้โดยใช้ props.name

ข้อควรจำ: ชื่อของ Props ที่เราส่งจาก Parent Component จะต้องตรงกับชื่อที่เราใช้ในการเข้าถึง Props ใน Child Component นะครับ

ประเภทของ Props

Props สามารถเป็นข้อมูลได้หลายประเภท ไม่ว่าจะเป็น:

• String: ข้อความ เช่น name="สมชาย"
• Number: ตัวเลข เช่น age={30}
• Boolean: ค่าความจริง (true/false) เช่น isLoggedIn={true}
• Array: อาร์เรย์ เช่น hobbies={['อ่านหนังสือ', 'ดูหนัง']}
• Object: อ็อบเจ็กต์ เช่น address={{ street: '123 Main St', city: 'Bangkok' }}
• Function: ฟังก์ชัน เช่น onPress={() => alert('Button pressed!')}
• Component: Component อื่นๆ

เมื่อส่งข้อมูลประเภท Number, Boolean, Array, หรือ Object เราจะต้องใส่ค่าเหล่านั้นไว้ใน curly braces {} ครับ

Default Props

เราสามารถกำหนดค่า Default Props ให้กับ Component ได้ หาก Parent Component ไม่ได้ส่ง Props นั้นมาให้ Child Component ตัวอย่างเช่น:

import React from 'react';
import { View, Text } from 'react-native';

const Greeting = (props) => {
  return (
    <View>
      <Text>สวัสดี, {props.name}!</Text>
    </View>
  );
};

Greeting.defaultProps = {
  name: 'ผู้ใช้งาน'
};

const App = () => {
  return (
    <View>
      <Greeting />
      <Greeting name="สมชาย" />
    </View>
  );
};

export default App;

ในตัวอย่างนี้ เราได้กำหนด Default Prop name ให้กับ Greeting Component โดยมีค่าเป็น "ผู้ใช้งาน" ดังนั้นเมื่อเราเรียกใช้ Greeting Component โดยไม่ได้ส่ง Props name มาให้ Component จะแสดงข้อความ "สวัสดี, ผู้ใช้งาน!" แต่ถ้าเราส่ง Props name มาให้ (เช่น <Greeting name="สมชาย" />) Component ก็จะแสดงข้อความ "สวัสดี, สมชาย!" แทน

การกำหนด Default Props ช่วยให้ Component ของเรามีความ robust มากขึ้น เพราะถึงแม้ Parent Component จะลืมส่ง Props บางอย่างมาให้ Component ก็ยังสามารถทำงานได้ตามปกติ

Props Validation (PropTypes)

เพื่อความปลอดภัยและความถูกต้องของข้อมูล เราสามารถใช้ PropTypes เพื่อตรวจสอบประเภทของ Props ที่ส่งมาให้กับ Component ได้ครับ PropTypes เป็น library ที่ช่วยให้เรากำหนด type ของ Props แต่ละตัวได้ และ React จะแสดง warning ใน console หาก Props ที่ส่งมาไม่ตรงกับ type ที่กำหนด

ข้อควรจำ: PropTypes จะทำงานเฉพาะใน development mode เท่านั้น ใน production mode จะไม่มีการตรวจสอบ Props เพื่อประสิทธิภาพที่ดีที่สุด

ในการใช้งาน PropTypes เราจะต้องติดตั้ง PropTypes library ก่อน:

npm install prop-types

จากนั้นเราสามารถ import PropTypes เข้ามาใน Component และกำหนด PropTypes สำหรับ Props แต่ละตัวได้ ตัวอย่างเช่น:

import React from 'react';
import { View, Text } from 'react-native';
import PropTypes from 'prop-types';

const Greeting = (props) => {
  return (
    <View>
      <Text>สวัสดี, {props.name}!</Text>
    </View>
  );
};

Greeting.propTypes = {
  name: PropTypes.string.isRequired
};

const App = () => {
  return (
    <View>
      <Greeting name="สมชาย" />
      {/* <Greeting />  // จะแสดง warning ใน console เพราะไม่ได้ส่ง prop name */}
    </View>
  );
};

export default App;

ในตัวอย่างนี้ เราได้กำหนด PropTypes สำหรับ Props name ของ Greeting Component โดยกำหนดให้เป็น string และเป็น required (จำเป็นต้องมี) หากเราเรียกใช้ Greeting Component โดยไม่ได้ส่ง Props name มาให้ React จะแสดง warning ใน console

PropTypes มี type ให้เลือกใช้มากมาย เช่น:

• PropTypes.string
• PropTypes.number
• PropTypes.bool
• PropTypes.array
• PropTypes.object
• PropTypes.func
• PropTypes.oneOf(['value1', 'value2']) (กำหนดให้ Props มีค่าได้แค่ค่าที่กำหนด)
• PropTypes.shape({ key1: PropTypes.string, key2: PropTypes.number }) (กำหนด shape ของ object)
• PropTypes.arrayOf(PropTypes.string) (กำหนดให้อาร์เรย์มีสมาชิกเป็น string ทั้งหมด)

การใช้ PropTypes เป็นวิธีที่ดีในการป้องกันข้อผิดพลาดที่อาจเกิดขึ้นจากการส่ง Props ที่ไม่ถูกต้องให้กับ Component

Props vs. State

Props และ State เป็นสองแนวคิดที่สำคัญใน React Native และมักจะถูกนำมาเปรียบเทียบกันเสมอ เพื่อให้เข้าใจความแตกต่างระหว่าง Props และ State ได้อย่างชัดเจน ลองพิจารณาตารางนี้:

คุณสมบัติ	Props	State
แหล่งที่มาของข้อมูล	มาจาก Parent Component	มาจาก Component เอง
การเปลี่ยนแปลงข้อมูล	เปลี่ยนแปลงได้เฉพาะ Parent Component	เปลี่ยนแปลงได้ภายใน Component เอง
การใช้งาน	ใช้ส่งข้อมูลจาก Parent Component ไปยัง Child Component	ใช้จัดการข้อมูลภายใน Component เอง
Read-only	Read-only (Child Component ไม่สามารถเปลี่ยนแปลงได้)	Mutable (Component สามารถเปลี่ยนแปลงได้)

โดยสรุป Props คือข้อมูลที่ส่งมาจากภายนอก (Parent Component) และ Read-only ในขณะที่ State คือข้อมูลที่จัดการภายใน Component เองและสามารถเปลี่ยนแปลงได้

สรุป

ในบทนี้ เราได้เรียนรู้เกี่ยวกับ Props ซึ่งเป็นแนวคิดที่สำคัญในการพัฒนาแอปพลิเคชัน React Native Props ช่วยให้เราส่งข้อมูลจาก Parent Component ไปยัง Child Component ได้ ทำให้เราสามารถสร้าง Component ที่มีความยืดหยุ่นและนำกลับมาใช้ใหม่ได้ นอกจากนี้เรายังได้เรียนรู้เกี่ยวกับการกำหนด Default Props และการใช้ PropTypes เพื่อตรวจสอบประเภทของ Props ที่ส่งมาให้กับ Component

ในบทต่อไป เราจะมาทำความรู้จักกับอีกหนึ่งแนวคิดที่สำคัญไม่แพ้กัน นั่นก็คือ State ครับ