React Props vs State | Parent Component | Child Component | React | Web Dev | Tamil | Mr. Tech Code

வணக்கம்!

இந்த பதிவின் மூலமாக, React உடைய Parent Components மற்றும் Child Components பற்றியும், அதற்கு இடையில் தகவல் மற்றும் Fucntions -களை பரிமாற்ற உதவும் State மற்றும் Props பற்றியும் தெரிந்துக்கொள்ளலாம்.

Parent Component

Parent Component என்பது High Level Component ஆகும். இந்த Component -இல் ஒன்று அல்லது அதற்கு மேற்பட்ட Child Components பயன்படுத்தப்பட்டு இருக்கும். 

மேலும், இந்த Parent Component -இல் இருந்து Child Component -களுக்கு தகவல் மற்றும் Fucntions பரிமாறப்பட்டு இருக்கும்.

Parent Component -இல் இருந்து Child Component உடைய தகவல் மற்றும் செயல்பாடுகளை கட்டுப்படுத்த இயலும். 

React State

State என்பது ஒரு தகவலை சேமித்து வைக்கவும், அதை பயன்படுத்தவும் உதவுகின்றது என்பதை இதற்கு முந்தைய பதிவான React useState() Hook -இல்  தெரிந்துக்கொண்டு இருப்பீர்கள்.

இந்த State ஆனது,  Parent Component -இல் உருவாக்கப்பட்டு, தகவல்களை பயன்படுத்த உதவுகின்றன.

State and Function (Parent Component)

மேற்கண்ட புகைப்படத்தில் Child Component -விற்கு அனுப்ப தேவையான State மற்றும் Function -கள் கொடுக்கப்பட்டுள்ளது.

Parent JSX with Child Component

மேற்கண்ட புகைப்படத்தில், Parent Component -இல் Button Component என்கின்ற Child Component கொடுக்கப்பட்டுள்ளது. மேலும், அந்த Child Component -இல் name மற்றும்  onClick என்கின்ற Identifier மூலமாக, 'Count' என்கின்ற தகவலும், handleClick என்கின்ற Function பரிமாற படுகின்றது.

Parent Component

மேற்கண்ட புகைப்படத்தில், Home Component என்கின்ற Parent Component -இல் Child Component எவ்வாறு பயன்படுத்தப்பட்டுள்ளது என்பதை தெரிந்துக்கொள்ளலாம்.

Child Component

Child Component என்பது Lower Level Component ஆகும். இந்த Component -க்கான தகவல் மற்றும் செயல்பாடுகள் (functionality) பெரும்பாலும் Parent Component -இல் இருந்து வருபவையாக அமைகின்றன.

Child Component -கள் பெரும்பாலும் UI Component -களாகவே பயன்படுத்த படுகின்றது. மேலும், இந்த Child Components உட்புறத்தில் Child Component -இற்கு மட்டுமே, தேவையான State மற்றும் Function -களையும் கொடுக்கலாம்.

Child Component பெரும்பாலும் Reusability -இற்கு பயன்படுத்தப்படுவதால், ஒரேயொரு Parent Component உடன் மற்றும் சேர்ந்து இருப்பது போல வடிவமைக்கக்கூடாது.

React Props

Props ஆனது Parent Component -இல் இருந்து Child Component -களுக்கு தகவல் மற்றும் செயல்பாடுகளை பரிமாற்ற பயன்படுத்தப்படுகின்றது. 

Parent Component உள்ளே கொடுக்கப்பட்டுள்ள Child Component -இல் முதலில் கொடுக்கப்படுவது Identifier ஆகும். அதன் பின்னர் Curly Brackets உள்ளே கொடுக்கப்படுவது, அதற்கான Value ஆகும்.

Parent Component Data Access using Props

மேற்கண்ட புகைப்படத்தில், Parent Component மூலமாக பெறப்பட்ட்ட name மற்றும் onClick ஆனது எவ்வாறு Props மூலமாக, Child Component -இல் பயன்படுத்தப்பட்டுள்ளது என்பதை தெரிந்துக்கொள்ளலாம்.

Child Component

உதாரணமாக, ButtonComponent என்பது Child Component ஆகும். இதை Home Component மற்றுமின்றி பல்வேறு Component -களிலும் பயன்படுத்தலாம். 

name மற்றும் function என்பது Parent component -ஐ சார்ந்து இருப்பதால், பல்வேறு Components -களில் இதை பயன்படுத்துவது மிக எளிமையான ஒன்றாகும்.

Parent Component with Child Component

மேற்கண்ட புகைப்படத்தில், Home என்பது Parent Component ஆகவும், ButtonComponent என்பது Child Component ஆகவும் கொடுக்கப்பட்டுள்ளது. அதனுடைய Initial Web Result ஆனது கீழ்கண்ட புகைப்படத்தில் கொடுக்கப்பட்டுள்ளது.

Initial Browser Result

கீழ்கண்ட புகைப்படத்தில், Child Component -இல் உள்ள Button -ஐ Click செய்யும் பொழுது, Parent Component உள்ள Value ஆனது Update ஆகியுள்ளதை பார்க்கலாம்.

Browser Result After Button Click

இதுமற்றுமின்றி, Props மூலமாக ஒரு Component -இல் இருந்து வேறொரு Component -இற்கு, முழு Component அனுப்ப இயலும்.

உதாரணமாக, கீழ்கண்ட புகைப்படத்தில் HomeComponent உள்ளே இரண்டு Child Components பயன்படுத்தப்பட்டுள்ளது. அதில் FirstChildComponent Tag -க்கு உட்புறத்தில், SecondChildComponent ஆனது பயன்படுத்தப்பட்டுள்ளது.

Child Component Children Props

குறிப்பு: FirstChildComponent: React.FC<{ children: React.ReactNode }> , இதில் FirstChildComponent ஆனது, React Functional Component -ஐ Children ஆக Props -இல் பெரும் என TypeScript -இல் குறிப்பிடப்பட்டுள்ளது.

Props Result: Second Child Component

மேற்காணும் புகைப்படத்தில், SecondChildComponent -இல் உள்ள H2 Tag ஆனது திரையில் தோன்றுவதை காணலாம்.

Conclusion

இந்த பதிவின் மூலமாக, Parent Component மற்றும் Child Components பற்றியும், அதற்கு இடையில் தகவல் மற்றும் Functions -களை பரிமாற்ற உதவும் Props பற்றியும் தெரிந்துக்கொண்டு இருப்பீர்கள்.