frontend elmélet

Frontend_ppt/react_js/context.tex

@@ -0,0 +1,133 @@
+\section{Context}
+
+\begin{frame}{A prop drilling probléma}
+  \begin{block}{Mi az a prop drilling?}
+    Ha egy adat a komponensfa tetején él, de csak mélyen lent lévő komponensnek kell, akkor az összes közbülső komponensen át kell „ütni" props-szal --- még akkor is, ha a köztes komponensek maguk nem használják. Ez nehézkessé és törékennyé teszi a kódot.
+  \end{block}
+  \vspace{0.5em}
+  A \textbf{Context API} ezt a problémát oldja meg: az adatot egy közös „kút"-ban tároljuk, amelyből bármely leszármazott komponens közvetlen props nélkül is ihat.
+\end{frame}
+
+\begin{frame}{Mire jó a Context API?}
+  \begin{itemize}
+    \item \textbf{Ritkán változó, globális adatok} átadásához ideális --- pl. téma (dark/light), aktív nyelv, bejelentkezett felhasználó adatai.
+    \item Két lépés: 1) \textbf{Provider} --- közzéteszi az értéket a fában; 2) \textbf{useContext} --- olvasásra foglalja le a komponensben.
+    \item Nem teljes értékű állapotkezelő: sűrűn változó adatokhoz ne használjuk, mert minden fogyasztó komponens újrarenderelődik.
+  \end{itemize}
+\end{frame}
+
+\begin{frame}{A Context és a Provider szerepe}
+  \begin{block}{Context}
+    A \texttt{createContext} egy konténer, amely az adatot tárolja. Maga nem csinál semmit --- csak definiálja, hogy melyik adat lesz megosztva.
+  \end{block}
+  \vspace{0.4em}
+  \begin{block}{Provider}
+    A \texttt{Provider} egy komponens, amely körülvesz más komponenseket, és az értéket \textbf{elérhetővé teszi} számukra. Minden komponens, amely a Provider-ben van, felhasználhatja az adatot.
+  \end{block}
+\end{frame}
+
+\begin{frame}[fragile]{Context és Provider --- alapvető kódpélda}
+\begin{verbatim}
+import { createContext, useContext } from "react";
+
+// 1. Context létrehozása
+const ThemeContext = createContext("light");
+
+// 2. Provider komponens a legfelső szinten
+function App() {
+  return (
+    <ThemeContext.Provider value="dark">
+      <Header />
+      <Content />
+    </ThemeContext.Provider>
+  );
+}
+\end{verbatim}
+\end{frame}
+
+\begin{frame}[fragile]{Context és Provider --- alapvető kódpélda folytatás}
+\begin{verbatim}
+// 3. Leszármazott komponensben: useContext
+function Header() {
+  const theme = useContext(ThemeContext);
+  return <h1>Tema: {theme}</h1>;
+}
+\end{verbatim}
+\end{frame}
+
+\begin{frame}[fragile]{Állapottal rendelkező Context --- teljesebb példa}
+\footnotesize\begin{verbatim}
+// ThemeContext.js
+const ThemeContext = createContext();
+
+export function ThemeProvider({ children }) {
+  const [theme, setTheme] = useState("light");
+  
+  return (
+    <ThemeContext.Provider value={{ theme, setTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  return useContext(ThemeContext);
+}
+\end{verbatim}
+\end{frame}
+
+\begin{frame}[fragile]{Felhasználás az alkalmazásban}
+\begin{verbatim}
+// App.js
+import { ThemeProvider } from "./ThemeContext";
+
+function App() {
+  return (
+    <ThemeProvider>
+      <Header />
+      <MainContent />
+    </ThemeProvider>
+  );
+}
+\end{verbatim}
+\end{frame}
+\begin{frame}[fragile]{Felhasználás az alkalmazásban folytatás}
+\begin{verbatim}
+// Header.js
+function Header() {
+  const { theme, setTheme } = useTheme();
+  return (
+    <button onClick={() => setTheme(theme === "light" ? "dark" : "light")}>
+      Aktualis tema: {theme}
+    </button>
+  );
+}
+\end{verbatim}
+\end{frame}
+
+\begin{frame}{Hogyan működik a gyakorlatban?}
+  \begin{itemize}
+    \item \texttt{createContext()} a kontextus objektumot hozza létre.
+    \item A \texttt{Provider} értéket ad át a \texttt{value} prop-on.
+    \item Mélyen lent elhelyezkedő komponensek a \texttt{useContext()} hookkal használják az adatot.
+    \item Custom hook (pl. \texttt{useTheme()}) felhasználóbarátabb API-t nyújt.
+  \end{itemize}
+\end{frame}
+
+\begin{frame}{Jó gyakorlatok és gyakori hibák}
+  \begin{itemize}
+    \item \textbf{Custom hook:} szokjunk meg a saját hook megírásának (pl. \texttt{useTheme}), ez takarítja a kódot és segíti az újrafelhasználást.
+    \item \textbf{Túl nagy Context:} ha túl sok adat van egy Context-ben, minden frissítés újrarendereli az összes fogyasztót --- inkább bontsuk fel több kisebb Context-re.
+    \item \textbf{nem Context-ben való adat:} gyorsan változó, nagy mennyiségű adat (pl. valós idejű pozíciók) nem Context-ben való --- inkább store (Redux, Zustand) vagy külön state.
+    \item \textbf{Default érték:} adjunk adjunk értelmes \texttt{createContext()} paraméterét --- dev módban segít descobrire a hiányzó Providert.
+  \end{itemize}
+\end{frame}
+
+\begin{frame}{Context vs. más megoldások}
+  \begin{itemize}
+    \item \textbf{Props:} egyszerű, néhány szintű adatátadásra. Érthető, explicit.
+    \item \textbf{Context:} ritkán változó, globális adatok. Szétszórt komponensek között.
+    \item \textbf{State Manager (Redux/Zustand):} komplett üzleti logika, komplex frissítések, szinkronizálás.
+    \item \textbf{Szerverállapot (TanStack Query):} API-ból érkező adatok, cache, szinkronizálás.
+  \end{itemize}
+\end{frame}