blog

Deklarativ forma bogʻlash

NEXTREE.

• 6 min read
Deklarativ forma bogʻlash

1. Kirish

Web ilovasi ishlab chiqishda dialog (Dialog) yoki modal ekran orqali ma'lumotlarni tahrirlash formasi (Form) ni amalga oshirish eng keng tarqalgan, ammo murakkabligi yuqori bo'lgan vazifalardan biridir. Xususan, administrator sahifasi yoki dashbordning 'Kontent tafsilotlarini o'zgartirish ekranida' kabi, ekran ochilgan paytda backend API dan asinxron ravishda tafsilotli ma'lumotlarni olib, formaning dastlabki qiymatiga bog'lash zarur bo'lgan tuzilmalarda yanada nozik holat boshqarilishi talab etiladi.

Dastlabki komponent loyihalashda eng intuitiv usul bo'lgan useEffect hook dan foydalangan holda tashqi Props orqali olingan tafsilotli ma'lumotlarning o'zgarishini aniqlab, formani boshqarish holatiga qo'lda qiymatlarni kiritishning buyruq (Imperative) yondashuvini qabul qildik. Biroq, bu usulni yuqori darajaga ko'tarish jarayonida kutilmagan raqobat muammolarini yuzaga keltirdi. Foydalanuvchi dialogni tezda yopib, boshqa elementni tanlab qayta ochganda, asinxron ma'lumotlarni olish vaqtiga bog'liq holda avvalgi ma'lumotlarning qoldiqlari kirish maydonida bir muncha vaqt qolishi yoki hookning chaqirish tartibi va komponentlarni render qilish hayotiy siklida uyg'unlikdan chiqishi natijasida holat yo'qolishi kuzatildi.

UI qatlamining o'qish imkoniyatini pasaytiruvchi va ma'lumotlarning yaxlitligini xavf ostiga qo'yuvchi ushbu doimiy muammoni hal qilish uchun, jarayon yondoshuvidagi useEffect ni keskin olib tashlab, React Hook Form kutubxonasining asosiy arxitekturasidan foydalangan holda e'lon qilingan (Declarative) holat sinxronizatsiyasini amalga oshirish tajribasini baham ko'rmoqchiman.

2. Texnologiya tanlash ortidagi sabablar

Reactda forma holatini boshqarishda tez-tez uchraydigan antipatlerdan biri ma'lumotlar oqimini useEffect ichida boshqarishga harakat qilishdir. Props orqali qabul qilingan ma'lumotlar har o'zgarganida ma'lum bir holatni qo'lda sinxronlashtirish tuzilmasi quyidagi cheklovlar bilan bog'liq:

  1. Holat sinxronizatsiya vaqtining mos kelmasligi: React holat yangilanishlari asinxron ravishda yig'ilib (Batch) ishlov berilganligi sababli, useEffect bajarilishi bilan forma qiymatlarini yangilanishidan oldin brauzer avvalgi holat asosida ekranni bir marta chizib chiqarishi bilan ko'rish vaqti qoldiqlari yoki tekshirish xatolari yuzaga keladi.

  2. Buyruq (Imperative) kodning asinxronligi: Kirish maydonlari ko'paygan sari har bir maydonni dastlabki holatga keltirish uchun yozish lozim bo'lgan shartlar va shartli operatorlar komponent ichida tarqalib ketadi, natijada 1000 qatordan ortiq bo'lgan og'ir va o'qilishi qiyin spaghetti komponentlari paydo bo'ladi.

React Hook Form bunday cheklovlarni yengishi mumkin bo'lgan e'lon qilinadigan xususiyatlarni taqdim etadi, ya'ni values opsiyasi. Komponent ichida holatni tiklaydigan buyruqlarni bevosita yozish o'rniga, forma ko'rayotgan ma'lumot manbasini obyekt shaklida aniq e'lon qilsangiz, kutubxona React ning renderlash quvuriy bilan sinxronlashtirib, holat qoldiqlarini xavfsiz tarzda tozalab, yangi ma'lumotlarni saqlab qoladi.

Shu sababli, komponent hayotiy sikliga xavfsiz tarzda joylashgan holda, kod o'qish imkoniyatini va dasturchi tajribasini maksimal darajada oshirishi mumkin bo'lgan yechim sifatida deklarativ bog'lash usuliga murojat qildik.

3. Haqiqiy qo'llash jarayoni va muammolarni hal qilish

Ushbu loyiha haqiqiy tafsilotlarni o'zgartirish dialogini loyihalash g'oyasiga asoslanib, muammolarni keltirib chiqarayotgan jarayonga e'lon qilinadigan tuzilma sifatida qayta ishlash jarayonini aniq kod bloklari bilan tushuntiraman.

3.1 useEffect asosidagi buyruq (Imperative) bog'lash tuzilmasi (Oldin)

Mavjud tuzilma mavjud bo'lganda, tashqi API so'rovi natijalari bo'lgan itemDetail obyekti kirganda, ichki sub-dialog ichida useEffect xujjatlari har safar bajarilib, setValue usuli orqali forma individual maydonlarini qo'lda to'ldirmoqda.

export const ModifyItemDialogBefore = ({ itemDetail, onClose }) => {
  const { register, handleSubmit, setValue } = useForm({
    defaultValues: {
      title: '',
      category: '',
      description: '',
    },
  });

  // 외부 데이터가 바뀔 때마다 수동으로 상태를 주입하는 안티 패턴
  useEffect(() => {
    if (itemDetail) {
      setValue('title', itemDetail.title ?? '');
      setValue('category', itemDetail.category ?? '');
      setValue('description', itemDetail.description ?? '');
    }
  }, [itemDetail, setValue]);

  const onSubmit = (data) => {
    console.log('서버 전송 데이터:', data);
  };

  return (
    <Dialog open={true} onClose={onClose}>
      <form onSubmit={handleSubmit(onSubmit)}>
        <input {...register('title')} placeholder="제목" />
        <button type="submit"> 수정 </button>
      </form>
    </Dialog>
  );
};

Yuqaridagi tuzilma asinxron yuklash tezligi sekinlashganda yoki foydalanuvchi dialogni tez-tez o'chirib yoqganda, itemDetail yetib bormagan bir payt ichida oldingi komponentdagi eski ma'lumotlar formaning o'zida qolib, ko'rsatilayotgan ma'lumotning ifloslanishiga olib keldi.

3.2 values atributlarini foydalanib e'lon qilingan bog'lanish tuzilmasi (After)

Buni hal qilish uchun useForm ichidagi values reaktiv atributini joriy etib, interfeysni ModifyItemFormValue tuzilmasiga oddiylashtirib, formaning o'z-o'zidan ma'lumot o'zgarishiga moslashini ta'minladik.

interface ModifyItemFormValue {
  title: string;
  category: string;
  date: Dayjs | null;
  description: string;
  details: string;
}

export const ModifyItemDialogAfter = ({ itemDetail, onClose }) => {
  // values 옵션을 선언해 두면, useEffect 없이도 데이터 변경 시 내부 상태가 자동 동기화됨
  const methods = useForm<ModifyItemFormValue>({
    values: {
      date: itemDetail?.updatedAt ? dayjs(itemDetail.updatedAt) : dayjs(),
      title: itemDetail?.title ?? '',
      category: itemDetail?.category ?? '',
      description: itemDetail?.description ?? '',
      details: itemDetail?.details ?? '',
    },
  });

  const { handleSubmit, register } = methods;

  const onSubmit = handleSubmit((data: ModifyItemFormValue) => {
    const baseDate = dayjs(data.date).startOf('day').valueOf();
    console.log('정합성이 보장된 타임스탬프 데이터 전송:', baseDate);
  });

  return (
    <Dialog open={true} onClose={onClose}>
      <Form methods={methods} onSubmit={onSubmit}>
        <div className="flexColumn gap16">
          <Field.Text name="title" placeholder="제목" />
          <Field.Text name="details" placeholder="상세 내용" multiline rows={2} />
        </div>
        <button type="submit">수정 완료</button>
      </Form>
    </Dialog>
  );
};

Shunday qilib, rekonstruksiya o'zgarishlari natijasida, React Hook Form kutubxonasi React-ning virtual DOM yangilanish vaqti bilan ma'lumotlar to'plamini atomik tarzda almashtirishi natijasida ekranda eski ma'lumotlar qoldiqlari ko'rsatilmaydi yoki forma holati xato sababli chalg'iydi.

4. Qo'llash natijalari va yutuqlar

O'tkazilgan loyiha natijasida, ichki asosiy kiritish forma qatlamida React Hook Form-ning values e'lon qilingan bog'lanish arxitekturasining keng qo'llanilishi natijasida quyidagi yutuqlarga erishdik.

  1. Holat chalg'ishi va UI qolip xatolarini nolga yetkazish: Dialog chaqiruv tezligi yoki asinxron aloqa mavjudligidan qat'i nazar, ma'lumotlar qoldiqlari ko'rsatilishi mukammal tarzda hal qilindi va bu orqali xatolar bo'yicha yordam so'rovlarining soni oldingiga nisbatan yaxshilanib qoldi.

  2. Kod bazasi o'qilishi va unumdorligini oshirish: Beqaror e'lon qilingan kodda o'qilishiga to'sqinlik qiluvchi komponent ichidagi useEffect jumlalari olib tashlanganligi natijasida modal bilan bog'liq umumiy manba kod satrlari o'rtacha 25% dan yuqori qisqarish holatiga kelib qoldi.

Bog'lanishni engillashtirish va ma'lumot barqarorligini ta'minlash: Biznes forma ma'lumotlarini qayta ishlash (ModifyItemFormValue) mantiqiy jihatdan vizual qatlamdan bir yo'nalishda ajratilib, avvalgi holatning zarracha ta'sirlariga ta'sir qilmasdan, sof komponent mustaqilligini ta'minladi.

5. Xulosa

Ushbu loyiha davomida yuzaga kelgan holat chalg'ishi xatosi va rekonstruksiya tajribasi, frontend arxitektura dizaynida holatning o'zgarish oqimini ishlab chiquvchilar side effect orqali majburan buyurtma berishdan ko'ra, ramka va kutubxonalar tomonidan taqdim etiladigan e'lon qilingan konsepsiyaga mos ravishda bog'lanishlarni aniqlik bilan e'lon qilish juda kuchli ekanligini isbotlash uchun yaxshi bir imkoniyat bo'ldi.

React Hook Form-ning values atributini ishlatgan hayot tsikli xaritalash texnikasi, oddiy xato tuzatishdan tashqari tizimning arxitekturasini bir qadam oldinga olib keladigan aktivga aylantirildi. Katta ma'lumotlarni boshqarish va kiritish maydonlari murakkab tarmoqda ancha murakkabligi yuqori bo'lgan korporativ muhitlarda ma'lumotlarning birligiga kafolat berish shunday bo'lishi zarur, shuningdek, bularni o'rnatilgan e'lon qilingan forma arxitektura sozlamalari tajribasini korporativ texnologiya komponentlarining standart ko'rsatmalariga ishlab chiqish uchun faol hissa qo'shmoqchiman.

* Referenslar

- React Hook Form - useForm API Hujjatlari

- React Rasmiy Hujjat - Effektlar bilan Sinxronlash

- React Rasmiy Hujjat - Sizga Effekt kerak bo'lmasligi mumkin

D.Hyeok

Site footer