Props এর মাধ্যমে Components এ Data পাঠানো

ReactJS-এ Props (প্রপস) একটি খুব গুরুত্বপূর্ণ ধারণা, যা ব্যবহার করে আমরা একটি কম্পোনেন্ট থেকে অন্য কম্পোনেন্টে ডেটা পাঠাতে পারি। Props হল একটি অবজেক্ট যা কম্পোনেন্টের মধ্যে ডেটা বা কনফিগারেশন প্যারামিটার হিসেবে কাজ করে। React কম্পোনেন্টগুলি সাধারণত ইনপুট (ডেটা) গ্রহণ করে এবং সেই অনুযায়ী UI রেন্ডার করে, এবং এই ডেটা Props এর মাধ্যমে প্রেরণ করা হয়।

Props কী?

Props (Property) হল React কম্পোনেন্টের জন্য একটি প্যারামিটার বা ইনপুট ডেটা, যা প্যারেন্ট কম্পোনেন্ট থেকে চাইল্ড কম্পোনেন্টে পাঠানো হয়। Props এর মাধ্যমে আমরা ডাইনামিক ডেটা কম্পোনেন্টে ইনজেক্ট করতে পারি। এটি একটি রিড-অনলি (read-only) অবজেক্ট, অর্থাৎ একবার Props প্রেরণ করার পর, চাইল্ড কম্পোনেন্ট এই ডেটা পরিবর্তন করতে পারে না, শুধুমাত্র রেন্ডারিংয়ের জন্য ব্যবহার করতে পারে।

Props এর মাধ্যমে Data পাঠানোর প্রক্রিয়া

1. প্যারেন্ট কম্পোনেন্ট থেকে Props প্রেরণ
   প্রথমে, প্যারেন্ট কম্পোনেন্টে ডেটা সেট করতে হবে এবং তারপর সেই ডেটা চাইল্ড কম্পোনেন্টে প্রপস হিসেবে পাঠাতে হবে।
2. চাইল্ড কম্পোনেন্টে Props গ্রহণ
   চাইল্ড কম্পোনেন্টে props প্যারামিটার ব্যবহার করে প্যারেন্ট থেকে প্রাপ্ত ডেটা গ্রহণ করা হয় এবং UI তে রেন্ডার করা হয়।

Props এর মাধ্যমে Data পাঠানোর উদাহরণ

ধরা যাক, আপনি একটি Greeting নামে প্যারেন্ট কম্পোনেন্ট তৈরি করেছেন এবং এই কম্পোনেন্ট থেকে একটি Message নামক চাইল্ড কম্পোনেন্টে একটি নাম প্রেরণ করতে চান।

১. প্যারেন্ট কম্পোনেন্ট (Greeting)

import React from 'react';
import Message from './Message';  // Message কম্পোনেন্ট আমদানি

function Greeting() {
  const name = "John";

  return (
    <div>
      <h1>Welcome to React!</h1>
      {/* Props এর মাধ্যমে data পাঠানো হচ্ছে */}
      <Message userName={name} />
    </div>
  );
}

export default Greeting;

এখানে, Greeting কম্পোনেন্টের মধ্যে name ভ্যারিয়েবলটি Message কম্পোনেন্টে userName নামক prop হিসেবে পাঠানো হচ্ছে।

২. চাইল্ড কম্পোনেন্ট (Message)

import React from 'react';

function Message(props) {
  return <h2>Hello, {props.userName}!</h2>;
}

export default Message;

এখানে, Message কম্পোনেন্টে props প্যারামিটার ব্যবহার করে প্যারেন্ট কম্পোনেন্ট থেকে প্রাপ্ত userName প্রপস রেন্ডার করা হচ্ছে।

আউটপুট:

Welcome to React!
Hello, John!

Props এর কিছু গুরুত্বপূর্ণ বৈশিষ্ট্য

1. Read-Only: Props পরিবর্তন করা যায় না। এটি শুধুমাত্র প্যারেন্ট কম্পোনেন্ট থেকে চাইল্ড কম্পোনেন্টে ডেটা প্রেরণের জন্য ব্যবহৃত হয়।
2. ডেটা প্রপস হিসেবে পাস করা: Props এর মাধ্যমে কম্পোনেন্টে স্ট্যাটিক বা ডাইনামিক ডেটা পাঠানো যেতে পারে। যেমন, একটি নাম, বয়স, ছবি, বা ফাংশন ইত্যাদি।
3. Reusability: Props ব্যবহার করে আপনি আপনার কম্পোনেন্টগুলোকে পুনরায় ব্যবহারযোগ্য করতে পারেন। উদাহরণস্বরূপ, আপনি একই কম্পোনেন্টে বিভিন্ন ডেটা পাঠিয়ে একাধিক বার ব্যবহার করতে পারেন।
4. Data Flow: Props React এর একমুখী ডেটা প্রবাহের (unidirectional data flow) মূল অংশ। অর্থাৎ, ডেটা শুধুমাত্র প্যারেন্ট থেকে চাইল্ড কম্পোনেন্টে প্রেরিত হয়, তবে চাইল্ড কম্পোনেন্ট থেকে প্যারেন্ট কম্পোনেন্টে ডেটা প্রেরণ করা সম্ভব নয়।

Props এবং State এর মধ্যে পার্থক্য

• Props: প্যারেন্ট কম্পোনেন্ট থেকে চাইল্ড কম্পোনেন্টে ডেটা প্রেরণ করা হয় এবং এটি রিড-অনলি (read-only) হয়। একে পরিবর্তন করা সম্ভব নয়।
• State: একটি কম্পোনেন্টের ভেতরের পরিবর্তনশীল ডেটা, যেটি কম্পোনেন্টের UI পরিবর্তন করতে ব্যবহৃত হয়। State পরিবর্তনশীল এবং এটি কম্পোনেন্টের মধ্যে স্থানান্তরিত হয় না, তবে Props-এর মাধ্যমে State উপরের কম্পোনেন্টে পাস করা যায়।

Props ব্যবহার করার সুবিধা

1. ডেটা শেয়ারিং: Props ব্যবহার করে আপনি এক কম্পোনেন্ট থেকে অন্য কম্পোনেন্টে ডেটা শেয়ার করতে পারেন, যা React অ্যাপ্লিকেশনের মধ্যে কোড পুনরায় ব্যবহারযোগ্যতা (reusability) বাড়ায়।
2. সহজ ডাইনামিক UI: Props এর মাধ্যমে আপনি ডাইনামিকভাবে UI রেন্ডার করতে পারেন, যেমন, ব্যবহারকারীর নাম, ছবি বা অন্য কোনো তথ্য যা পরিবর্তনশীল হতে পারে।
3. কম্পোনেন্টের বিচ্ছিন্নতা (Decoupling): Props ব্যবহারের ফলে কম্পোনেন্টগুলোর মধ্যে নির্ভরশীলতা কমে যায়, কারণ প্যারেন্ট কম্পোনেন্টের পরিবর্তন চাইল্ড কম্পোনেন্টে স্বয়ংক্রিয়ভাবে প্রতিফলিত হয়।

সারাংশ

ReactJS-এ Props হল প্যারেন্ট কম্পোনেন্ট থেকে চাইল্ড কম্পোনেন্টে ডেটা প্রেরণের প্রধান উপায়। এটি রিড-অনলি (read-only) একটি অবজেক্ট, যা React অ্যাপ্লিকেশনের মধ্যে ডেটা প্রবাহকে পরিচালিত করে। Props ব্যবহার করে আপনি React কম্পোনেন্টগুলোর মধ্যে ডেটা শেয়ার করতে এবং UI ডাইনামিকভাবে রেন্ডার করতে পারেন।