Components คืออะไร
Components เป็นส่วนประกอบพื้นฐานของ React Native ใช้สำหรับแยกส่วนของ UI และ Logic ออกเป็นหน่วยเล็กๆ ที่นำกลับมาใช้ใหม่ได้ ทำให้โค้ดอ่านง่ายและจัดการได้ดีขึ้น

คุณสมบัติของ Components:

• ใช้เพื่อสร้าง UI แบบแยกส่วน
• สามารถใช้งานซ้ำได้
• มีสองประเภทหลัก: Functional Components และ Class Components

การสร้าง Components แบบฟังก์ชันและคลาส

Functional Components

• เป็นการสร้าง Components โดยใช้ฟังก์ชัน
• นิยมใช้ใน React รุ่นใหม่ เนื่องจากอ่านง่ายและรองรับ Hooks

ตัวอย่าง Functional Component:

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

const Greeting = (props) => {
  return <Text>Hello, {props.name}!</Text>;
};

export default Greeting;

Class Components

• เป็นการสร้าง Components โดยใช้คลาส
• ใช้สำหรับกรณีที่ต้องการจัดการ State (ก่อนการมาของ Hooks)

ตัวอย่าง Class Component:

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

class Greeting extends Component {
  render() {
    return <Text>Hello, {this.props.name}!</Text>;
  }
}

export default Greeting;

การส่งข้อมูลด้วย Props
Props (Properties) คือค่าที่ใช้ส่งจาก Components แม่ (Parent) ไปยัง Components ลูก (Child)

• Props จะเป็นแบบอ่านอย่างเดียว (Read-only)
• ส่งผ่านการกำหนด attribute ใน JSX

ตัวอย่างการส่ง Props

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

const App = () => {
  return (
    <View>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
    </View>
  );
};

export default App;

ตัวอย่างอธิบาย:

1. Component App ส่งค่า name="Alice" และ name="Bob" ไปยัง Component Greeting
2. Greeting แสดงข้อความโดยใช้ props.name

การใช้ Props กับค่า Default
สามารถกำหนดค่าเริ่มต้นให้กับ Props ได้โดยใช้ defaultProps

ตัวอย่างการกำหนดค่า Default

const Greeting = (props) => {
  return <Text>Hello, {props.name}!</Text>;
};

Greeting.defaultProps = {
  name: 'Guest',
};

ผลลัพธ์:
ถ้าไม่ได้ส่งค่า name จะใช้ค่าเริ่มต้นเป็น Guest

ข้อดีของ Components และ Props:

1. ช่วยแยกโค้ดออกเป็นส่วนย่อยๆ: ทำให้จัดการโค้ดได้ง่าย
2. เพิ่มความสามารถในการนำกลับมาใช้ซ้ำ: ใช้ Components เดียวกันในหลายส่วนของแอป
3. Props ช่วยให้ Components รับข้อมูลแบบยืดหยุ่น: ส่งค่าแตกต่างกันไปยัง Components เดียวกันได้