frontend elmélet

2026-03-17 23:53:10 +01:00
parent 8da3a1eb32
commit 28bd7661f5
69 changed files with 1072 additions and 9534 deletions
@@ -0,0 +1,50 @@
+\section{Állapotkezelés}
+
+\begin{frame}{Mi az állapot (state)?}
+  \begin{block}{Analógia: a komponens "emlékezete"}
+    Az állapot az, amit a komponens \textbf{megjegyez} renderelések között. Gondoljunk rá úgy, mint egy cetlire, amire a komponens feljegyzi az aktuális értékeit --- hány termék van a kosárban, be van-e jelentkezve a felhasználó, milyen szöveg van az input mezőben.
+  \end{block}
+  \vspace{0.5em}
+  \begin{itemize}
+    \item Az állapot megváltozásakor a React \textbf{automatikusan újrarendereli} az érintett komponenst.
+    \item Az állapot a komponensen \emph{belül} él --- más komponens nem látja közvetlenül.
+  \end{itemize}
+\end{frame}
+
+\begin{frame}{Állapot típusok a gyakorlatban}
+  \begin{itemize}
+    \item \textbf{Lokális UI állapot:} csak egy komponenst érint --- pl. le van-e hajtva egy dropdown, aktív-e egy fül.
+    \item \textbf{Megosztott állapot:} több komponens is olvas vagy ír belőle --- pl. a bejelentkezett felhasználó neve.
+    \item \textbf{Szerverállapot:} API-ból érkező, kiszolgálón élő adat, amelyet le kell kérni és szinkronban kell tartani.
+    \item \textbf{URL állapot:} az aktuális útvonal, query paraméterek --- természetesen megosztható és könyvjelzőzhető.
+  \end{itemize}
+\end{frame}
+
+\begin{frame}{Egyirányú adatfolyam}
+  \begin{block}{Mi ez pontosan?}
+    Reactben az adatok mindig \textbf{szülőtől gyermek felé} áramlanak (props-on keresztül). A gyermek \emph{nem módosíthatja} a szülő állapotát közvetlenül --- csak egy callback függvényen (eseménykezelőn) keresztül jelezhet vissza.
+  \end{block}
+  \vspace{0.5em}
+  \begin{itemize}
+    \item Ezért kiszámítható: mindig tudjuk, honnan ered egy érték.
+    \item Hibakeresés könnyebb --- az adatfolyamot felfelé haladva követhetjük.
+  \end{itemize}
+\end{frame}
+
+\begin{frame}{State emelés (Lifting State Up)}
+  \begin{itemize}
+    \item Ha két testvérkomponensnek ugyanazt az adatot kell látnia, az állapotot a legközelebbi közös ősbe \textbf{emeljük fel}.
+    \item Az ős kezeli az állapotot, és props-on keresztül osztja szét a gyermekek között.
+    \item \textbf{Példa:} egy szűrő mező és egy lista --- mindkettőnek ugyanaz a szűrési feltétel kell, ezért azt a szülőben tároljuk.
+  \end{itemize}
+\end{frame}
+
+\begin{frame}{Mikor kell külső állapotkezelő?}
+  \begin{itemize}
+    \item Ha az állapot emelése sok szinten keresztül megy, és a köztes komponensek csak "átpasszolják" --- ezt hívjuk \textbf{prop drilling}-nek.
+    \item Ha az állapot nagyon sok helyen kell, és bonyolult szinkronizálás szükséges.
+    \item Külső megoldások: \textbf{Redux Toolkit} (nagy, komplex alkalmazásokhoz), \textbf{Zustand} (könnyű, egyszerű API), \textbf{Jotai} (atomi, finomhangolt).
+    \item Legtöbb esetben a beépített eszközök (useState + Context) elegendők --- ne bonyolítsuk túl.
+  \end{itemize}
+\end{frame}
+