\section{Űrlapkezelés}

\begin{frame}{Kontrollált és nem kontrollált input}
  \begin{block}{Kontrollált input}
    Az input mező értékét a React állapot tárolja és vezérli. A \texttt{value} prop és az \texttt{onChange} esemény mindig szinkronban tartja a React állapotot és a mezőt --- bármikor pontosan tudjuk, mi van a mezőben.
  \end{block}
  \vspace{0.3em}
  \begin{block}{Nem kontrollált input}
    A DOM maga kezeli az értéket --- React csak beküldéskor kéri le (\texttt{useRef}-fel). Egyszerűbb felépítés, de valós idejű validáció nehezebb.
  \end{block}
\end{frame}

\begin{frame}{Miért érdemes kontrollált inputot használni?}
  \begin{itemize}
    \item Mindig pontos képünk van az aktuális beviteli értékről --- nem kell a DOM-ból "kiolvasni".
    \item \textbf{Valós idejű validáció:} hibát jelzünk gépelés közben, nem csak beküldéskor.
    \item Feltételes engedélyezés/tiltás, formázás, karakterlimit könnyen kezelhető.
    \item Hátránya: sok mezőnél sok state szükséges --- erre nyújtanak megoldást a könyvtárak.
  \end{itemize}
\end{frame}

\begin{frame}{Validáció --- mit kell ellenőrizni?}
  \begin{itemize}
    \item \textbf{Kötelező mezők:} ne lehessen üres beküldés.
    \item \textbf{Formátum:} email, telefonszám, irányítószám megfelelő-e?
    \item \textbf{Üzleti szabályok:} min. 8 karakteres jelszó, egyező jelszavak, stb.
    \item A hibákat erős vizuális visszajelzéssel kell jelezni --- a felhasználó ne találgasson, mi a baj.
  \end{itemize}
\end{frame}

\begin{frame}{Miért használjunk könyvtárat?}
  \begin{itemize}
    \item Kézi megvalósításnál sok ismétl�'d�' kód keletkezik --- minden mez�'höz saját state, validáció, hibaüzenet.
    \item \textbf{React Hook Form:} minimális újrarenderelés, nagyon gyors, könnyen tanulható API --- a legtöbb esetben ez az ajánlott.
    \item \textbf{Formik:} régebben nagyon népszerű, sok csapat már ismeri; kicsit több boilerplate.
    \item \textbf{Zod / Yup:} séma alapú validáló könyvtárak --- a validációs logikát típusbiztos sémában írjuk le, React Hook Form-mal jól kombinálható.
  \end{itemize}
\end{frame}