List Rendering

ကျတော်တို့ programmer တွေ developer တွေတိုင်းလိုလို DRY principle ကို ကြားဖူးကြမယ်လို့ထင်ပါတယ်

React application တစ်ခုမှာလည်းကျတော်တို့ က အဲလို DRY principle ကို လိုက်နာပြီးတော့ ရေးကြတဲ့အခါမှာ

ကျတော်တို့က render တွေလုပ်ကြတယ်မလား

ဒီထဲမှာကျတော်တို့ react မှာအသုံးပြုတာများတဲ့ list render အကြောင်းကိုဆက်ပြီးတော့လေ့လာသွားကြ ရအောင်

အရင်ဆုံး ကျတော်တို့ code လေးတွေကို ဒီလိုလေးရေးလိုက်ပါမယ်

import React from 'react'

function ListRendering () {
    const list = [ "Bate" , "Thar" , "Kaung" , "Myat" , "Hun" ]
    return(
        <div>List Rendering</div>
    )
}
export default ListRendering

ကျတော်တို့က နောက်ပိုင်းကျရင် ဒေတာတွေ array တွေကို ဒေတာပြန်ယူပြီးတော့ render လုပ်တဲ့အခါမှာ

ကျတော်တို့က ဒီဟာတွေကိုတခုချင်း လိုက်ပြီးတော့မရေးသွားပါဘူး အဲဒါကို ကျတော်တို့က

ဘယ်လိုမျိုးရေးသွားမှာလည်းဆိုတော့

return(
    <div>
        {
            list.map((item) => (
                <h3>{item}</h3>
            )
        }
    </div>
)

ဒီလိုလေးရေးလိုက်ပြီးရင်ကျ‌တော် တချက်ပြန်ရှင်းပြပေးပါမယ်

အဲဒါကဘာလည်းဆိုတော့ ကျတော်တို့က array data တခုကို render ချချင်တဲ့အခါမှာ array.map

ကိုအသုံးပြုကြပါတယ်

ဘာလို့ ဒီဟာကို ပဲ အသုံးပြုရတာလည်း တခြား ဟာတွေဖြစ်တဲ့ for တို့ for each တို့က

သုံးလို့မရဘူးလားလို့မေးစရာရှိလာပါတယ်

သုံးလို့ကမရဘူးလားဆိုတော့ ရပါတယ် ဒါပေမယ့် map လိုမျိုး တိုက်ရိုက်ကြီးရေးလို့ရတော့မှာမဟုတ်ဘဲနဲ့

သူ့ကို return ပြန်အောင်လုပ်ပေးပြီးတော့ အဲဒါကို ပြန်ပြီးတော့ render ချပေးရမှာပါ array.map မှာက

ကျတော့သူက array ကို return လုပ်ပေးသွားတာဖြစ်တဲ့အတွက် ကျတော်တို့က ဒီဟာကို အသုံးပြုကြတာပါ

ကဲ ဆက်လိုက်ကြရအောင်

အခု အဲလိုလေးရေးလိုက်တဲ့အခါမှာ ကျတော်တို့ browser မှာပြန်သွားကြည့်တဲ့အခါမှာ result ကို

ကျတော်တို့ မြင်ရပါလိမ့်မယ် ဒါပေမယ့်သူကို ကျတော်တို့ console မှာ သွားကြည့်တဲ့အခါမှာ

warning ပြနေတာကိုမြင်ရလိမ့်မယ် အဲဒါက ဘာလည်းဆိုတော့

ဘာလို့ အဲလိုပြောတာလည်းဆိုတော့ ကျတော်တို့ က react မှာ array data ကို list render လုပ်တဲ့အခါမှာ

ကျတော်တို့က သူနဲ့ သက်ဆိုင်တဲ့ node ကို unique ဖြစ်တဲ့ key props လေးတခု ကိုထည့်ပေးပါလို့ပြောပါတယ်

ဘာကြောင့် အဲလိုတောင်းတာလည်းဆိုတော့ သူက v-dom (virtual dom) ထဲမှာ သွားပြီးတော့ render

သွားချပေးတဲ့အခါမှာ ကျတော်တို့ အခု list render လုပ်လိုက်တဲ့ node တွေက အကုန်လုံးတူနေနိုင်တဲ့အနေအထား

တခုရှိနေလို့ပါ အဲအတွက် ကြောင့် သူက v-dom (virtual dom) မှာပြန်စစ်တဲ့အခါမှာ အလွယ်တကူ ဖြစ်အောင်လို့

သူက အဲဒါကိုတောင်းတာပါ ပြီးတော့နောက်တချက်က အဲဒီ unique ဖြစ်တဲ့ key လေးကိုအသုံးပြုပြီးတော့

react က ပြောင်းလဲမှုတွေကို တိုက်စစ်ပြီးတော့မှ browser ကို render ချပေးတာပါ

ကျတော်တို့ ကုဒ်လေးတွေကိုနည်းနည်းပြင်လိုက်ရအောင်

return(
    <div>
        {
            list.map((item , index) => (
                <h3 key={index}>{item}</h3>
            )
        }
    </div>
)

ဒီမှာ ကျတော်တို့က index ဆိုတာကို ယူထားတာတွေ့ရလိမ့်မယ်ဗျ အဲဒီ index ဆိုတာက ဘာလည်း ကို

တွေးမိချင်တွေးမိလိမ့်မယ်

တကယ်က ကျတော်တို့က render လုပ်တဲ့ array ရဲ့ index တွေကို ယူပြီးတော့ထည့်ပေးလိုက်တာပါ

ကျတော်တို့ array တခုမှာ index တွေက တခုနဲ့တခုက မတူဘူးလေ အဲအတွက်ကြောင့် သူ့ကို unique

ဖြစ်တဲ့အရာဆိုတော့ အဲဒါလေးကို ကျတော်တို့က အလွယ်လေးသုံးလိုက်တာပါ( တစ်ကယ်ဆိုရင် မသုံးသင့်ပါဘူးနော်)

အဲလောက်ဆိုရင်တော့ list render ကို နားလည်သွားမယ်လို့ထင်ပါတယ်