রেন্ডার ট্রি (Render Tree) এবং মডিউল ট্রি (Module Tree) – রিয়াক্টের প্রেক্ষাপটে

১. রেন্ডার ট্রি (Render Tree) কী?

রেন্ডার ট্রি হলো ডকুমেন্ট অবজেক্ট মডেল (DOM) এবং স্টাইলিং ইনফরমেশন (CSS) এর সম্মিলিত রূপ। এটি একটি ট্রি স্ট্রাকচার যেখানে প্রতিটি নোড একটি UI এলিমেন্টের প্রতিনিধিত্ব করে।

রিয়াক্টে, আমরা JSX দিয়ে কম্পোনেন্ট লিখি, যা শেষে HTML DOM এ রূপান্তরিত হয়। রিয়াক্ট তখন একটি ভার্চুয়াল DOM তৈরি করে এবং সেই DOM এর ওপর কাজ করে।

রেন্ডার ট্রি কিভাবে কাজ করে?

1. DOM ও CSSOM তৈরি: প্রথমে ব্রাউজার HTML থেকে একটি DOM (ডকুমেন্ট অবজেক্ট মডেল) তৈরি করে। তারপর CSS থেকে CSSOM (CSS অবজেক্ট মডেল) তৈরি করে।

2. রেন্ডার ট্রি নির্মাণ: DOM এবং CSSOM একসাথে মিলে রেন্ডার ট্রি তৈরি করে।

3. লেআউট এবং পেইন্টিং: এরপর ব্রাউজার প্রতিটি এলিমেন্টকে তার যথাযথ জায়গায় বসিয়ে দেয় (লেআউট), এবং পরিশেষে সেই এলিমেন্টগুলোকে পেইন্ট করে।

রেন্ডার ট্রির প্রয়োজনীয়তা ও সুবিধা:

• রেন্ডার ট্রি প্রয়োজন, কারণ এটি ব্রাউজারের কাছে নির্দিষ্ট ভাবে জানায়, কিভাবে পেজটি দেখাবে।
• এর মাধ্যমে DOM এর পরিবর্তন হলে, ব্রাউজার শুধু সংশ্লিষ্ট অংশটুকু পুনরায় রেন্ডার করে। ফলে পারফরম্যান্স বৃদ্ধি পায়।
• রিয়াক্টের ভি-ডম (Virtual DOM) রেন্ডার ট্রির উপর ভিত্তি করে কাজ করে। ভি-ডম পারফরম্যান্স অপটিমাইজ করার জন্য রেন্ডার ট্রির শুধুমাত্র পরিবর্তিত অংশ পুনরায় আপডেট করে।

উদাহরণ:

function App() {
    return (
        <div>
            <h1>React Render Tree Example</h1>
            <p>This is a paragraph.</p>
        </div>
    );
}

• div এবং তার child nodes (h1 এবং p) একসাথে রেন্ডার ট্রি তৈরি করবে।
• যদি শুধু p ট্যাগ আপডেট হয়, রিয়াক্ট শুধুমাত্র সেই অংশে রেন্ডার করবে, বাকি অংশ অপরিবর্তিত থাকবে।

২. মডিউল ট্রি (Module Tree) কী?

মডিউল ট্রি হলো আমাদের অ্যাপ্লিকেশনের সব জাভাস্ক্রিপ্ট মডিউলগুলোর একটি ডিপেনডেন্সি চেইন। এটি দেখায় কোন মডিউলটি কোন মডিউলের উপর নির্ভর করে।

মডিউল ট্রি কিভাবে কাজ করে?

রিয়াক্ট এবং অন্যান্য মডুলার ফ্রেমওয়ার্কে, বিভিন্ন ফাইল/মডিউল একে অপরের উপর নির্ভর করে কাজ করে। Webpack বা অন্য কোন মডিউল বান্ডলার, মডিউলগুলোকে একটি ট্রি স্ট্রাকচারে সাজায় যেখানে প্রতিটি মডিউল অন্য মডিউলের সাথে সম্পর্কিত হয়।

উদাহরণ:

ধরা যাক, আপনার তিনটি ফাইল আছে: App.js, Header.js, এবং Footer.js। App.js তে আপনি Header.js এবং Footer.js কে ইম্পোর্ট করছেন।

// App.js
import Header from "./Header";
import Footer from "./Footer";
 
function App() {
    return (
        <>
            <Header />
            <Footer />
        </>
    );
}
 
export default App;

এখানে মডিউল ট্রি এরূপ হবে:

App.js
  ├── Header.js
  └── Footer.js

মডিউল ট্রির প্রয়োজনীয়তা ও সুবিধা:

• মডিউল ট্রির কারণে অ্যাপ্লিকেশনকে ছোট ছোট মডিউলে ভাগ করা সম্ভব হয়, যা রক্ষণাবেক্ষণ সহজ করে।
• এটি কোডের পুনরায় ব্যবহারযোগ্যতা বাড়ায়।
• মডিউল ডিপেনডেন্সি বুঝতে এবং অপ্রয়োজনীয় মডিউল বাদ দিতে সাহায্য করে।

রেন্ডার ট্রি এবং মডিউল ট্রির সম্মিলিত কাজ

রিয়াক্ট অ্যাপ্লিকেশন যখন ব্রাউজারে চলে, তখন মডিউল ট্রি মডিউলগুলোকে লোড এবং রিজলভ করে এবং এরপর রেন্ডার ট্রি সেই সব মডিউল থেকে UI রেন্ডার করে।

ইলাস্ট্রেশন:

• রেন্ডার ট্রি: একটি গাছের মতো যেখানে প্রতিটি শাখা DOM এর একটি অংশ। শীর্ষে div থাকে এবং তার নিচে child elements।
• মডিউল ট্রি: একটি ডিপেনডেন্সি গাছ যেখানে App.js হলো মূল শাখা এবং অন্যান্য child modules তার সাথে যুক্ত থাকে।

সংক্ষেপে:

• রেন্ডার ট্রি UI কে ব্রাউজারে দেখানোর জন্য DOM এবং CSSOM এর সম্মিলিত অবস্থা।
• মডিউল ট্রি অ্যাপ্লিকেশনের মডিউলগুলো একে অপরের সাথে কিভাবে সংযুক্ত তা বুঝায়।