Conditional Rendering কী এবং কিভাবে কাজ করে?

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 অ্যাপ্লিকেশন উন্নয়নে একটি গুরুত্বপূর্ণ টুল হিসেবে কাজ করে।