Conditional Rendering এবং Lists

ReactJS-এ Conditional Rendering এবং Lists হল দুইটি গুরুত্বপূর্ণ ধারণা যা ব্যবহারকারীর ইন্টারফেসকে আরও ইন্টারঅ্যাকটিভ এবং ডাইনামিক করে তোলে। Conditional Rendering আপনাকে বিভিন্ন শর্তের উপর ভিত্তি করে UI উপাদানগুলি শো বা হাইড করতে সাহায্য করে, এবং Lists আপনাকে একাধিক উপাদান ডাইনামিকভাবে রেন্ডার করতে সহায়তা করে। এই টপিকে আমরা দুটি ধারণার বিস্তারিত আলোচনা করব।

Conditional Rendering কী?

ReactJS-এ Conditional Rendering ব্যবহারকারীর প্রদত্ত শর্তের উপর ভিত্তি করে UI উপাদানগুলি রেন্ডার করার পদ্ধতি। আপনি যদি কোন শর্ত পূর্ণ না হয়, তবে একটি উপাদান দেখাবেন না বা অন্য উপাদানটি রেন্ডার করবেন। এটি JavaScript এর সাধারণ লজিক ব্যবহার করে যেমন if-else, ternary operator বা logical operators।

উদাহরণ:

1. if-else লজিক ব্যবহার করা:

function Welcome(props) {
  if (props.isLoggedIn) {
    return <h1>Welcome back!</h1>;
  }
  return <h1>Please sign up.</h1>;
}

এখানে, Welcome কম্পোনেন্টটি isLoggedIn প্রপসের ভিত্তিতে দুটি ভিন্ন বার্তা রেন্ডার করবে।

2. Ternary Operator ব্যবহার করা:

function Welcome(props) {
  return (
    <h1>{props.isLoggedIn ? 'Welcome back!' : 'Please sign up.'}</h1>
  );
}

এটি isLoggedIn প্রপসের ভিত্তিতে শর্ত অনুযায়ী রেন্ডার করবে, এবং ternary operator ব্যবহার করে কোড আরও সংক্ষিপ্ত করা হয়েছে।

3. Logical && অপারেটর ব্যবহার করা:

function Notifications(props) {
  return (
    <div>
      {props.unreadMessages.length > 0 && (
        <h2>You have {props.unreadMessages.length} unread messages.</h2>
      )}
    </div>
  );
}

এখানে, যদি unreadMessages এর দৈর্ঘ্য ০ এর বেশি হয়, তাহলে একটি বার্তা রেন্ডার হবে। এই ধরনের conditional rendering আপনাকে কম্পোনেন্টের অবস্থার ভিত্তিতে UI আপডেট করার সুযোগ দেয়।

Lists এবং Keys in React

React-এ Lists ব্যবহারের মাধ্যমে একাধিক উপাদান ডাইনামিকভাবে রেন্ডার করা সম্ভব হয়। আপনি যখন ডেটার একটি তালিকা (array) ব্যবহার করেন, তখন React-এ সেই তালিকা থেকে UI উপাদান তৈরি করা যায়। React-এ লিস্ট রেন্ডার করতে হলে, একটি map() ফাংশন ব্যবহার করা হয় যা প্রত্যেকটি আইটেমের জন্য একটি কম্পোনেন্ট তৈরি করে।

উদাহরণ:

function ItemList() {
  const items = ['Apple', 'Banana', 'Orange'];
  return (
    <ul>
      {items.map(item => <li key={item}>{item}</li>)}
    </ul>
  );
}

এখানে, map() ফাংশনটি items অ্যারে থেকে প্রতিটি উপাদানের জন্য একটি <li> ট্যাগ তৈরি করছে এবং তাদের রেন্ডার করছে।

Keys in Lists:

React-এ key একটি বিশেষ প্রপার্টি যা প্রতিটি তালিকা আইটেমের জন্য দেওয়া হয়, যাতে React জানে কোন আইটেমটি পরিবর্তিত হয়েছে, যুক্ত হয়েছে বা মুছে গেছে। এটা React কে তালিকার মধ্যে আইটেম গুলি ট্র্যাক করতে সাহায্য করে এবং রেন্ডারিং পারফরম্যান্স উন্নত করে।

যতটা সম্ভব, আপনি unique keys ব্যবহার করা উচিত, যেমন ID বা এমন কিছু যা প্রতিটি তালিকা আইটেমের জন্য একে অপর থেকে পৃথক।

function ItemList() {
  const items = [
    { id: 1, name: 'Apple' },
    { id: 2, name: 'Banana' },
    { id: 3, name: 'Orange' }
  ];

  return (
    <ul>
      {items.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
  );
}

এখানে, প্রতিটি <li> আইটেমে key প্রপস হিসেবে item.id ব্যবহার করা হয়েছে, যা React কে দ্রুত পরিবর্তনগুলি ট্র্যাক করতে সাহায্য করে।

Conditional Rendering এবং Lists এর কম্বিনেশন

আপনি Conditional Rendering এবং Lists একসাথে ব্যবহার করতে পারেন যাতে ডেটা বা উপাদানগুলি কেবলমাত্র নির্দিষ্ট শর্তে রেন্ডার হয়। উদাহরণস্বরূপ:

function MessageList(props) {
  const messages = props.messages;
  return (
    <div>
      {messages.length > 0 ? (
        <ul>
          {messages.map(message => <li key={message.id}>{message.text}</li>)}
        </ul>
      ) : (
        <p>No messages to display</p>
      )}
    </div>
  );
}

এখানে, যদি messages তালিকাটি খালি না হয়, তাহলে একটি লিস্ট রেন্ডার হবে। অন্যথায়, একটি "No messages to display" বার্তা দেখানো হবে। এটি Conditional Rendering এবং Lists ব্যবহারের একটি সাধারণ উদাহরণ।

সারাংশ

• Conditional Rendering React-এ শর্তের উপর ভিত্তি করে UI উপাদান রেন্ডার করার প্রক্রিয়া।
• Lists React-এ ডাইনামিকভাবে একাধিক উপাদান রেন্ডার করার পদ্ধতি, সাধারণত map() ফাংশনের মাধ্যমে।
• Keys React-এ লিস্ট আইটেম গুলোর পারফরম্যান্স এবং সঠিক রেন্ডারিং নিশ্চিত করতে ব্যবহৃত হয়।
• React-এ Conditional Rendering এবং Lists একসাথে ব্যবহার করে ডাইনামিক, ইন্টারেকটিভ এবং শর্তাধীন UI তৈরি করা যায়।

Conditional Rendering কী?

ReactJS-এ Conditional Rendering হল একটি কৌশল যা আপনাকে UI উপাদানগুলোর দৃশ্যমানতা নিয়ন্ত্রণ করতে সাহায্য করে, নির্দিষ্ট শর্ত (conditions) বা প্রোপস (props) বা স্টেট (state) এর উপর ভিত্তি করে। এটি একটি সাধারণ JavaScript কনসেপ্ট, যেখানে আপনি বিভিন্ন শর্ত অনুযায়ী UI রেন্ডার করার সিদ্ধান্ত নেন।

ReactJS-এ, সাধারণত if, else, অথবা ত্রৈত অপারেটর (ternary operator) ব্যবহার করে কন্ডিশনাল রেন্ডারিং করা হয়। এই কৌশলটি আপনাকে একটি কম্পোনেন্টে বিভিন্ন শর্তে বিভিন্ন UI উপাদান রেন্ডার করার সুবিধা দেয়।

Conditional Rendering কিভাবে কাজ করে?

ReactJS-এ কন্ডিশনাল রেন্ডারিং করার জন্য কয়েকটি পদ্ধতি ব্যবহার করা যেতে পারে:

১. if-else Statement

if-else স্টেটমেন্ট ব্যবহার করে UI-তে নির্দিষ্ট উপাদান শর্তভিত্তিক রেন্ডার করা যায়। উদাহরণস্বরূপ:

class Welcome extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoggedIn: false
    };
  }

  render() {
    if (this.state.isLoggedIn) {
      return <h1>Welcome back!</h1>;
    } else {
      return <h1>Please sign in</h1>;
    }
  }
}

এখানে, isLoggedIn স্টেটের মান যদি true হয়, তবে "Welcome back!" শিরোনাম দেখাবে, অন্যথায় "Please sign in" শিরোনামটি প্রদর্শিত হবে।

২. তৃতীয় অপারেটর (Ternary Operator)

তৃতীয় অপারেটর একটি সংক্ষিপ্ত পদ্ধতি যেখানে condition ? expr1 : expr2 এর মাধ্যমে শর্ত ভিত্তিক রেন্ডারিং করা যায়। উদাহরণ:

class Welcome extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoggedIn: false
    };
  }

  render() {
    return (
      <h1>{this.state.isLoggedIn ? 'Welcome back!' : 'Please sign in'}</h1>
    );
  }
}

এখানে, isLoggedIn স্টেটের মানের উপর ভিত্তি করে রেন্ডার করা হয়। যদি isLoggedIn true হয়, তবে "Welcome back!" এবং যদি false হয়, "Please sign in" রেন্ডার হবে।

৩. Logical AND (&&) Operator

লজিক্যাল AND অপারেটরটি সাধারণত JSX-এ ব্যবহৃত হয় যখন আপনি একটি নির্দিষ্ট শর্তের অধীনে UI উপাদান রেন্ডার করতে চান। উদাহরণ:

class Welcome extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoggedIn: true
    };
  }

  render() {
    return (
      <div>
        {this.state.isLoggedIn && <h1>Welcome back!</h1>}
      </div>
    );
  }
}

এখানে, isLoggedIn যদি true হয়, তবে "Welcome back!" শিরোনামটি রেন্ডার হবে, অন্যথায় কিছুই রেন্ডার হবে না।

৪. Inline If with Logical OR (||)

আপনি কখনো কখনো একটি ডিফল্ট ভ্যালু প্রদর্শন করতে চান যদি কোনো শর্ত পূর্ণ না হয়। এ ক্ষেত্রে, লজিক্যাল OR অপারেটর ব্যবহার করা যেতে পারে। উদাহরণ:

class Welcome extends React.Component {
  render() {
    const name = this.props.name;
    return <h1>Hello, {name || 'Guest'}!</h1>;
  }
}

এখানে, যদি name প্রোপস পাওয়া না যায় (যদি null বা undefined থাকে), তবে "Guest" প্রদর্শিত হবে।

Conditional Rendering ব্যবহার করার পরিস্থিতি

ReactJS-এ কন্ডিশনাল রেন্ডারিং সাধারণত কিছু নির্দিষ্ট শর্তের ভিত্তিতে UI আপডেট করতে ব্যবহৃত হয়, যেমন:

1. লগইন অবস্থান অনুযায়ী কন্টেন্ট প্রদর্শন: আপনি লগইন অবস্থার উপর ভিত্তি করে ইউজারকে বিভিন্ন ধরনের কন্টেন্ট দেখাতে পারেন, যেমন লগইন শীর্ষক UI অথবা লগআউট শীর্ষক UI।
2. ফর্ম ভ্যালিডেশন: ফর্মে ইউজার ইনপুটের ভিত্তিতে ফর্মের ভ্যালিডেশন প্রদর্শন করা যায়। যেমন, ইনপুট ফিল্ড ফাঁকা থাকলে একটি বার্তা দেখানো।
3. লোডিং স্টেট: আপনি যখন একটি অ্যাপ্লিকেশন বা কম্পোনেন্টে ডেটা লোড করছেন, তখন লোডিং স্পিনার বা টেক্সট প্রদর্শন করতে পারেন।

উপসংহার

ReactJS-এ কন্ডিশনাল রেন্ডারিং ব্যবহার করে UI-এর বিভিন্ন অংশ শর্তানুযায়ী পরিবর্তন করা যায়, যা অ্যাপ্লিকেশনকে আরো ইন্টারেকটিভ এবং ডাইনামিক করে তোলে। if, ternary operator, এবং && ইত্যাদি ব্যবহার করে শর্তানুযায়ী বিভিন্ন UI উপাদান রেন্ডার করা সম্ভব। এটি React অ্যাপ্লিকেশন উন্নয়নে একটি গুরুত্বপূর্ণ টুল হিসেবে কাজ করে।

ReactJS-এ ডাইনামিকভাবে কন্টেন্ট রেন্ডার করার জন্য অনেক সময় শর্তাধীন (conditional) রেন্ডারিং ব্যবহার করা হয়। এই শর্তাধীন রেন্ডারিং করতে আমরা সাধারণত If-Else, Ternary Operator, এবং Logical AND (&&) ব্যবহার করি। এগুলো React-এর JSX কোডে কন্ডিশনাল রেন্ডারিংয়ের জন্য জনপ্রিয় পদ্ধতি। চলুন, এই তিনটি পদ্ধতির ব্যবহার দেখবো।

১. If-Else ব্যবহৃত JSX এ

ReactJS-এ যদি আপনি If-Else ব্যবহার করতে চান, তবে এটি সরাসরি JSX এর মধ্যে লিখা যায় না, কারণ JSX এক্সপ্রেশনগুলো সাধারণত এক লাইনে লেখা হয়। তবে, আপনি এটি কম্পোনেন্টের রেন্ডার মেথডের মধ্যে বা ফাংশনের বাইরে ব্যবহার করতে পারেন।

উদাহরণ:

function Greeting(props) {
  let message;
  if (props.isLoggedIn) {
    message = <h1>Welcome back, {props.name}!</h1>;
  } else {
    message = <h1>Please log in.</h1>;
  }
  return message;
}

এখানে, If-Else লজিক ব্যবহার করে আমরা কন্ডিশন অনুযায়ী ভিন্ন ভিন্ন UI রেন্ডার করছি। isLoggedIn প্রপসের মান অনুযায়ী "Welcome back" বা "Please log in" বার্তা দেখানো হবে।

২. Ternary Operator

ReactJS-এ Ternary Operator হল একটি এক লাইনের শর্তীয় রেন্ডারিং কৌশল, যা সাধারণত যদি আপনি একাধিক শর্তের মধ্যে সিলেক্ট করতে চান। এটি condition ? true : false ফরম্যাটে কাজ করে। JSX কোডে এটি সহজে ব্যবহার করা যায় এবং বেশি পঠনযোগ্য হয়।

উদাহরণ:

function Greeting(props) {
  return (
    <h1>{props.isLoggedIn ? `Welcome back, ${props.name}!` : "Please log in."}</h1>
  );
}

এখানে, Ternary Operator ব্যবহার করা হয়েছে isLoggedIn প্রপসের মান পরীক্ষা করতে, এবং তার ভিত্তিতে ভিন্ন ভিন্ন টেক্সট রেন্ডার করা হচ্ছে। এই কোডে isLoggedIn সত্য হলে "Welcome back" বার্তা, আর যদি মিথ্যা হয় তবে "Please log in" বার্তা দেখানো হবে।

৩. Logical AND (&&) অপারেটর

ReactJS-এ Logical AND (&&) অপারেটরটি সাধারণত তখন ব্যবহার করা হয় যখন আপনি শর্তসাপেক্ষে কিছু রেন্ডার করতে চান, কিন্তু শুধুমাত্র একটি শর্ত পুরণ হলে। এটি যদি শর্ত সত্য হয়, তবে পরবর্তী অংশটি রেন্ডার করবে। অন্যথায় কিছুই রেন্ডার হবে না।

উদাহরণ:

function Greeting(props) {
  return (
    <div>
      {props.isLoggedIn && <h1>Welcome back, {props.name}!</h1>}
    </div>
  );
}

এখানে, props.isLoggedIn যদি সত্য হয়, তাহলে "Welcome back" বার্তা রেন্ডার হবে, এবং যদি মিথ্যা হয়, তাহলে কিছুই রেন্ডার হবে না। Logical AND অপারেটরটি মূলত true && JSX স্টাইলের শর্তাবলীতে ব্যবহৃত হয়, যেখানে শুধু শর্ত সত্য হলে JSX অংশটি রেন্ডার হয়।

কোন পরিস্থিতিতে কোন পদ্ধতি ব্যবহার করবেন?

• If-Else: আপনি যখন অনেক শর্তের ভিত্তিতে আলাদা আলাদা JSX ব্লক রেন্ডার করতে চান, তখন If-Else ব্যবহার করা সবচেয়ে উপযুক্ত। এটি বড় এবং জটিল শর্তগুলির জন্য কার্যকর।
• Ternary Operator: আপনি যখন একটি বা দুটি শর্তের ভিত্তিতে দ্রুত এবং সরলভাবে রেন্ডার করতে চান, তখন Ternary Operator ব্যবহার করুন। এটি ছোট এবং পরিষ্কার শর্তাবলী জন্য আদর্শ।
• Logical AND (&&): আপনি যখন একটি একক শর্তের ভিত্তিতে একটি JSX এলিমেন্ট রেন্ডার করতে চান, এবং শর্ত মিথ্যা হলে কিছুই রেন্ডার হবে না, তখন Logical AND (&&) ব্যবহার করুন। এটি ঐ situatons-এ খুব কার্যকর।

সারাংশ

ReactJS-এ If-Else, Ternary Operator, এবং Logical AND (&&) ব্যবহার করে শর্তসাপেক্ষ রেন্ডারিং করা যায়, যা অ্যাপ্লিকেশনের UI কে ডাইনামিক এবং ইন্টারেক্টিভ করে তোলে। এই তিনটি পদ্ধতির মধ্যে Ternary Operator ও Logical AND সাধারণত ছোট এবং সরল শর্তাবলীর জন্য ব্যবহৃত হয়, যেখানে If-Else বেশি জটিল শর্তগুলির জন্য উপযুক্ত।

ReactJS-এ Lists এবং Arrays রেন্ডার করা একটি সাধারণ কার্যকলাপ, যেখানে আমরা ডাইনামিকভাবে একাধিক উপাদান (elements) রেন্ডার করার জন্য একটি অ্যারে বা তালিকা ব্যবহার করি। React একাধিক উপাদান রেন্ডার করার জন্য map() ফাংশন ব্যবহার করে, যা একটি অ্যারে বা লিস্ট থেকে প্রতিটি উপাদানকে JSX এ রেন্ডার করে।

এটি বিশেষভাবে উপকারী যখন আমাদের একটি ডেটাবেস থেকে ডেটা এনে বা কোনো ইন্টারঅ্যাকটিভ উপাদান তৈরি করার সময় একাধিক উপাদান প্রদর্শন করতে হয়।

Lists এবং Arrays রেন্ডার করার প্রক্রিয়া

React-এ অ্যারে বা লিস্ট রেন্ডার করতে সাধারণত map() ফাংশন ব্যবহার করা হয়, যা প্রতিটি উপাদানকে একে একে JSX টেমপ্লেটে রেন্ডার করে।

১. একটি অ্যারে রেন্ডার করা

ধরা যাক, আমাদের একটি অ্যারে আছে যা কিছু নাম ধারণ করে। আমরা এই অ্যারে থেকে প্রতিটি নামকে আলাদা আলাদা তালিকা আইটেমে (list item) রেন্ডার করতে চাই।

উদাহরণ:

import React from 'react';

function NameList() {
  const names = ['John', 'Jane', 'Alice', 'Bob'];

  return (
    <ul>
      {names.map((name, index) => (
        <li key={index}>{name}</li>
      ))}
    </ul>
  );
}

এখানে, names.map() ফাংশনটি names অ্যারের প্রতিটি উপাদানকে লিস্ট আইটেম (<li>) হিসেবে রেন্ডার করছে। প্রতিটি li উপাদানের জন্য একটি ইউনিক key প্রদান করা হয়েছে, যা React-কে ট্র্যাক করতে সাহায্য করে।

• key: React-এ লিস্ট রেন্ডার করার সময় প্রতিটি উপাদানকে এক্সপ্লিসিটলি একটি key প্রপস প্রদান করা উচিত। এটি React-কে জানায় যে কোন উপাদান পরিবর্তিত হয়েছে, যুক্ত হয়েছে বা মুছে গেছে। সাধারণত, আমরা একটি ইউনিক আইডি বা ইনডেক্স ব্যবহার করি।

২. অবজেক্টের অ্যারে রেন্ডার করা

যখন আপনি একটি অ্যারের মধ্যে অবজেক্ট (objects) রাখেন, তখন প্রতিটি অবজেক্টের প্রপার্টি (যেমন নাম, বয়স ইত্যাদি) রেন্ডার করতে পারেন।

উদাহরণ:

import React from 'react';

function UserList() {
  const users = [
    { id: 1, name: 'John', age: 25 },
    { id: 2, name: 'Jane', age: 22 },
    { id: 3, name: 'Alice', age: 28 }
  ];

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>
          {user.name} is {user.age} years old.
        </li>
      ))}
    </ul>
  );
}

এখানে, users.map() ফাংশনটি users অ্যারের প্রতিটি অবজেক্ট থেকে name এবং age প্রপার্টি ব্যবহার করে একটি তালিকা তৈরি করছে। এখানে id প্রপসটি key হিসেবে ব্যবহার করা হয়েছে, কারণ এটি প্রতিটি অবজেক্টের জন্য ইউনিক।

৩. ডাইনামিক অ্যারে রেন্ডার করা

React-এ অ্যারের উপাদানগুলি সাধারণত ডাইনামিকভাবে রেন্ডার করা হয়, যেমন API কল থেকে ডেটা আনা বা ইউজার ইন্টারঅ্যাকশনের মাধ্যমে ডেটা আপডেট করা।

উদাহরণ (ডাইনামিকভাবে অ্যারে রেন্ডার):

import React, { useState, useEffect } from 'react';

function MovieList() {
  const [movies, setMovies] = useState([]);

  useEffect(() => {
    fetch('https://api.example.com/movies')
      .then(response => response.json())
      .then(data => setMovies(data));
  }, []); // Empty dependency array means this runs once after mount

  return (
    <ul>
      {movies.map(movie => (
        <li key={movie.id}>{movie.title}</li>
      ))}
    </ul>
  );
}

এখানে, useEffect হুকটি ব্যবহার করা হয়েছে যা কম্পোনেন্ট মাউন্ট হওয়ার পর একটি API কল করে এবং প্রাপ্ত ডেটা movies স্টেটে সেভ করে। তারপর movies.map() ফাংশনটি প্রতিটি সিনেমার শিরোনাম <li> আইটেমে রেন্ডার করে।

৪. এডিটিং/অপসন রেন্ডারিং

যখন আপনাকে লিস্টে কোনো পরিবর্তন বা অপসন অ্যাড করতে হয়, তখন আপনি React স্টেট ব্যবহার করতে পারেন। উদাহরণস্বরূপ, একটি লিস্টে আইটেম যোগ করার জন্য:

উদাহরণ:

import React, { useState } from 'react';

function ShoppingList() {
  const [items, setItems] = useState(['Apple', 'Banana', 'Orange']);
  const [newItem, setNewItem] = useState('');

  const addItem = () => {
    if (newItem) {
      setItems([...items, newItem]);
      setNewItem('');
    }
  };

  return (
    <div>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
      <input
        type="text"
        value={newItem}
        onChange={e => setNewItem(e.target.value)}
      />
      <button onClick={addItem}>Add Item</button>
    </div>
  );
}

এখানে, useState হুকটি ব্যবহৃত হয়েছে লিস্টের আইটেম এবং নতুন আইটেম ইনপুট স্টেট ম্যানেজ করতে। নতুন আইটেম যোগ করতে addItem ফাংশন ব্যবহার করা হচ্ছে, যা ইন্টারফেসে নতুন আইটেম দেখাবে।

উপসংহার

ReactJS-এ Lists এবং Arrays রেন্ডার করা অত্যন্ত সহজ, এবং এটি React এর শক্তিশালী ফিচারের একটি অংশ। আপনি map() ফাংশন ব্যবহার করে অ্যারে বা লিস্ট থেকে ডাইনামিক্যালি UI রেন্ডার করতে পারেন। সাথে key প্রপস ব্যবহার করে প্রতিটি উপাদানকে ইউনিকভাবে চিহ্নিত করা React-এর জন্য খুবই গুরুত্বপূর্ণ, কারণ এটি কম্পোনেন্ট রি-রেন্ডারিংকে অপটিমাইজ করে।

ReactJS-এ key অ্যাট্রিবিউট একটি গুরুত্বপূর্ণ ভূমিকা পালন করে যখন কম্পোনেন্টগুলির মধ্যে এলিমেন্টের তালিকা (list) রেন্ডার করা হয়। এটি React-এর রেন্ডারিং পদ্ধতির জন্য একটি নির্ধারণকৃত কী ব্যবহারের মাধ্যমে কম্পোনেন্টের প্রতিটি উপাদান (element) চিহ্নিত করতে সহায়তা করে। key অ্যাট্রিবিউট ব্যবহারের মাধ্যমে React খুব সহজেই যেকোনো পরিবর্তন, যেমন উপাদান যোগ করা, সরানো বা আপডেট করার ক্ষেত্রে পারফরম্যান্স অপটিমাইজ করতে পারে।

key এর প্রয়োজনীয়তা

যখন আপনি React-এ একটি তালিকা বা অ্যারে রেন্ডার করেন, যেমন একটি map ফাংশন ব্যবহার করে একাধিক কম্পোনেন্ট তৈরি করেন, তখন React জানে না কোন উপাদানটি পরিবর্তন হয়েছে বা কোনটি সরানো হয়েছে। যদি আপনি প্রতিটি উপাদানকে একটি key প্রদান না করেন, তবে React প্রতিটি উপাদানকে নতুন হিসেবে চিহ্নিত করবে এবং নতুন করে পুরো তালিকাটি রেন্ডার করবে, যা কার্যকারিতায় নেতিবাচক প্রভাব ফেলতে পারে।

key অ্যাট্রিবিউট React কে এটি নির্ধারণ করতে সাহায্য করে যে, কোন উপাদানটি পরিবর্তন হয়েছে, কোনটি নতুন হয়েছে এবং কোনটি সরানো হয়েছে। এর ফলে, React দ্রুত এবং কার্যকরভাবে UI আপডেট করতে পারে।

key এর ব্যবহার

১. তালিকা রেন্ডার করার সময়

React-এ তালিকা রেন্ডার করার সময় প্রতিটি উপাদানকে একটি অনন্য key প্রদান করতে হয়। সাধারণত এই key একটি ইউনিক আইডি বা ইনডেক্স হতে পারে।

const items = ['apple', 'banana', 'cherry'];

function FruitList() {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

এখানে, key={index} দিয়ে প্রতিটি তালিকা উপাদানকে একটি কিপরিচিত (unique) key প্রদান করা হয়েছে। তবে, এটি সাধারণত পরামর্শিত নয়, কারণ যদি তালিকায় কোনো উপাদান সরানো হয় বা আনা হয়, তাহলে React আসল উপাদানগুলিকে চিহ্নিত করতে পারবে না, ফলে UI নষ্ট হতে পারে।

২. একটি ইউনিক আইডি ব্যবহার করা

তবে, ভালো অভ্যাস হল যে আপনি তালিকার প্রতিটি উপাদানের জন্য একটি ইউনিক আইডি ব্যবহার করুন। সাধারণত ডেটাবেস থেকে নেওয়া ডাটা বা কোনো ভেরিয়েবল থেকে এই key প্রাপ্ত করা যায়।

const items = [
  { id: 1, name: 'apple' },
  { id: 2, name: 'banana' },
  { id: 3, name: 'cherry' }
];

function FruitList() {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

এখানে, key={item.id} দিয়ে প্রতিটি তালিকা উপাদানকে একটি ইউনিক আইডি দেওয়া হয়েছে, যা React-এর জন্য প্রতিটি উপাদান চিহ্নিত করা সহজ করে।

key এর সুবিধা

১. পারফরম্যান্স অপটিমাইজেশন

key অ্যাট্রিবিউট React-কে উপাদানগুলোকে ট্র্যাক করতে সাহায্য করে এবং প্রয়োজনীয় পরিবর্তনগুলো দ্রুত করতে দেয়, যাতে UI-র শুধুমাত্র প্রয়োজনীয় অংশই আপডেট হয়। এর ফলে, পারফরম্যান্স উন্নত হয়।

২. উপাদানের সঠিক পরিচিতি

key অ্যাট্রিবিউট উপাদানগুলোর সঠিক পরিচিতি প্রদান করে, যাতে React জানে কোন উপাদানটি পরিবর্তিত হয়েছে, কোনটি সরানো হয়েছে এবং কোনটি নতুনভাবে যোগ করা হয়েছে। এর মাধ্যমে, উপাদানের স্থিতি (state) বা এন্ট্রি রেঞ্জ হালনাগাদ করা হয়।

৩. তালিকায় উপাদান যোগ, সরানো বা আপডেট করা

যখন কোনো উপাদান তালিকা থেকে সরানো হয় অথবা নতুন উপাদান যোগ করা হয়, তখন key React-কে জানায় কোন উপাদানটি পরিবর্তন হয়েছে। এটি খুব দ্রুত রেন্ডারিং প্রক্রিয়া করে এবং UI এর সঠিকতা বজায় রাখে।

key এর সীমাবদ্ধতা

১. কেবল তালিকার উপাদানগুলোর জন্য

key শুধুমাত্র তালিকা (list) বা অ্যারে রেন্ডার করার জন্য ব্যবহৃত হয়। একক কম্পোনেন্টের ক্ষেত্রে key ব্যবহারের কোনো প্রয়োজন নেই।

২. ইনডেক্স ব্যবহার থেকে বিরত থাকা

যখন আপনি তালিকার আইটেমগুলোর অবস্থান পরিবর্তন বা আপডেট করবেন, তখন ইনডেক্স (key={index}) ব্যবহার করা পরামর্শিত নয়। ইনডেক্স ব্যবহার করলে React তালিকার মধ্যে উপাদানগুলির সঠিক পরিচিতি রাখতে পারে না, যার ফলে UI-এ ভুল রেন্ডারিং হতে পারে।

সারাংশ

ReactJS-এ key অ্যাট্রিবিউট একটি অত্যন্ত গুরুত্বপূর্ণ ভূমিকা পালন করে, বিশেষ করে যখন আপনি তালিকা বা অ্যারে রেন্ডার করেন। এটি React-কে প্রতিটি উপাদানকে সঠিকভাবে চিহ্নিত করতে সাহায্য করে, যাতে UI দ্রুত এবং কার্যকরভাবে আপডেট করা যায়। key ব্যবহার করার মাধ্যমে React পারফরম্যান্স উন্নত করে এবং সঠিকভাবে UI রেন্ডার করে।