React-এ প্রসঙ্গ
পরবর্তী হুক শেখার আগে, আমাদের React-এ প্রসঙ্গ এর ধারণা বিবেচনা করতে হবে।
সাধারণত আমরা
প্রপস ব্যবহার করে
প্যারেন্ট কম্পোনেন্ট থেকে চাইল্ড কম্পোনেন্টে ডেটা প্রেরণ করতাম।
এই পদ্ধতিটি ভাল যদি আপনার কম কম্পোনেন্ট থাকে
এবং আপনাকে প্যারেন্ট থেকে আপনার প্রয়োজনীয়
কম্পোনেন্টে চাইল্ডের মাধ্যমে
2-3 এর বেশি সময় প্রপস পাস করতে না হয়।
এই পদ্ধতিটি অত্যন্ত অসুবিধাজনক হয়ে উঠতে পারে এবং বিভিন্ন সমস্যার দিকে নিয়ে যেতে পারে, যদি মধ্যবর্তী কম্পোনেন্টগুলিতে এই প্রপসগুলি মোটেও ব্যবহার না করা হয় (এই ধরনের সমস্যাকে prop drilling বলা হয়), অথবা আপনাকে একই ডেটা প্রচুর সংখ্যক কম্পোনেন্টে প্রেরণ করতে হয়।
এই ক্ষেত্রে, প্রসঙ্গ আমাদের সাহায্য করতে পারে, যা প্রপসের মাধ্যমে প্রেরণ না করেই প্যারেন্ট কম্পোনেন্টের ডেটা যেকোনো চাইল্ডের জন্য উপলব্ধ করতে দেয়, কম্পোনেন্ট ট্রিতে এর অবস্থান নির্বিশেষে। তদনুসারে, শুধুমাত্র সেই কম্পোনেন্টগুলিই ডেটা গ্রহণ করবে যাদের সেগুলির প্রয়োজন।
প্রসঙ্গ ব্যবহার করার জন্য, এটি তৈরি করতে হবে। শুরুতে, আসুন ফাইল
MyContext.js তৈরি করি এবং এতে ফাংশন
createContext ইম্পোর্ট করি:
import { createContext } from 'react';
এখন একটি প্রসঙ্গ অবজেক্ট তৈরি করি,
এটিকে MyContext ভেরিয়েবলে লিখি, যেটি
এক্সপোর্ট করতে ভুলবেন না। আমাদের
ক্ষেত্রে, আমরা createContext এ
প্রাথমিক মান null সেট করেছি, কারণ এটি আমাদের জন্য
মূল নয় (কেবল খালি বন্ধনী রেখে দেওয়াও যেত)।
ডিফল্ট মানটি
প্রসঙ্গ পড়ার সময় উপস্থিত হবে, যদি অন্য কোনো
মান না পাওয়া যায়। এই মান যেকোনো ধরনের হতে পারে:
export const MyContext = createContext(null);
পরবর্তী পাঠে আমরা আলাদা ফাইলে অবস্থিত বেশ কয়েকটি কম্পোনেন্ট নিয়ে একটি অ্যাপ্লিকেশন তৈরি করব। যদি সব কম্পোনেন্ট একই ফাইলে থাকত, তবে প্রসঙ্গ তৈরি করার জন্যও আমরা আলাদা ফাইল তৈরি করতাম না এবং এটি এক্সপোর্ট করতাম না।
এখন আসুন MyContext.js কে
খালি কম্পোনেন্ট App এ ইম্পোর্ট করি -
সেই কম্পোনেন্টে, যেখান থেকে আমরা
ডেটা প্রেরণ করতে চলেছি:
import { MyContext } from './MyContext.js';
MyContext.js ফাইল তৈরি করুন এবং
এটিকে খালি কম্পোনেন্ট
App এ ইম্পোর্ট করুন, যেমন পাঠে বর্ণিত হয়েছে।
