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

State এবং Props এর ব্যবহার - রিয়্যাক্ট জেএস (ReactJS) - Web Development

484

ReactJS-এ State এবং Props দুটি খুবই গুরুত্বপূর্ণ ধারণা, যেগুলোর মাধ্যমে কম্পোনেন্টের ডেটা এবং কন্ট্রোল পরিচালনা করা হয়। তবে, এগুলোর মধ্যে কিছু মূল পার্থক্য রয়েছে, যা React অ্যাপ্লিকেশনের কার্যকরী ও ডাইনামিক তৈরি করতে সাহায্য করে।

State কী?

State একটি React কম্পোনেন্টের অভ্যন্তরীণ ডেটাকে ধারণ করে, যা সময়ের সাথে পরিবর্তিত হতে পারে। এটি সেই ডেটা বা ইনফরমেশন যা কম্পোনেন্টের মধ্যে রেন্ডারিং বা UI পরিবর্তন ঘটানোর জন্য ব্যবহৃত হয়। State শুধুমাত্র সেই কম্পোনেন্টের মধ্যে অ্যাক্সেসযোগ্য থাকে যেখানে এটি ডিফাইন করা হয়।

State এর বৈশিষ্ট্য:

অভ্যন্তরীণ ডেটা: State শুধুমাত্র একটি কম্পোনেন্টের অভ্যন্তরীণ ডেটা হিসেবে কাজ করে, যা কম্পোনেন্টের UI বা আচরণ পরিবর্তন করতে পারে।
পরিবর্তনশীল: State ডেটা পরিবর্তনযোগ্য (mutable)। React-এ setState() ফাংশন ব্যবহার করে State পরিবর্তন করা যায়।
কম্পোনেন্ট-ভিত্তিক: State শুধুমাত্র যেখানে ডিফাইন করা হয়, সেই কম্পোনেন্টের মধ্যে এক্সেসযোগ্য। এক কম্পোনেন্ট থেকে অন্য কম্পোনেন্টে State সরাসরি প্রপ্স (props) এর মাধ্যমে পাঠানো যায় না।

State উদাহরণ:

import React, { useState } from 'react';

function Counter() {
  // State ডিফাইন করা হচ্ছে
  const [count, setCount] = useState(0);

  // State পরিবর্তন করতে setCount ব্যবহার করা হচ্ছে
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

এখানে count হল state, এবং setCount এর মাধ্যমে state পরিবর্তন হচ্ছে।

Props কী?

Props (short for properties) হল React কম্পোনেন্টের মাধ্যমে প্যারেন্ট কম্পোনেন্ট থেকে চাইল্ড কম্পোনেন্টে ডেটা প্রেরণের একটি উপায়। Props হল কম্পোনেন্টের বাইরে থেকে প্রাপ্ত ডেটা যা চাইল্ড কম্পোনেন্টের মধ্যে প্রদর্শিত হয়। Props পরিবর্তনযোগ্য (immutable) নয় এবং চাইল্ড কম্পোনেন্টে শুধুমাত্র প্যারেন্ট কম্পোনেন্টের কাছ থেকে প্রাপ্ত ডেটা থাকবে।

Props এর বৈশিষ্ট্য:

ডেটা প্রপ্সের মাধ্যমে পাঠানো হয়: Props এর মাধ্যমে প্যারেন্ট কম্পোনেন্ট চাইল্ড কম্পোনেন্টে ডেটা পাঠায়। একটি কম্পোনেন্টের props প্যারেন্ট কম্পোনেন্ট দ্বারা নির্ধারিত হয়।
immutable: Props কে একবার সেট করার পরে, চাইল্ড কম্পোনেন্ট সেই ডেটা পরিবর্তন করতে পারে না। এটি শুধুমাত্র রিড-অনলি (read-only)।
কম্পোনেন্টের মধ্যে তথ্য শেয়ার করা: Props একটি চাইল্ড কম্পোনেন্টকে তার প্যারেন্ট কম্পোনেন্টের ডেটা ব্যবহার করতে দেয়।

Props উদাহরণ:

import React from 'react';

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

function App() {
  return <Greeting name="John" />;
}

এখানে, Greeting কম্পোনেন্ট name প্রপস ব্যবহার করছে, যা প্যারেন্ট কম্পোনেন্ট App থেকে প্রেরিত হয়েছে।