Hogyan férhetünk hozzá az adatokhoz React-ben…

React-ben többféle módon érhetjük el az adatokat:

Props: Az adatok átadása a szülőkomponenstől a gyermekkomponenshez. A props változatlanok a komponensen belül.

// Szülő komponens
function ParentComponent() {
  const data = "Hello from Parent!";
  return <ChildComponent myData={data} />;
}

// Gyermek komponens
function ChildComponent(props) {
  return <p>{props.myData}</p>; // Hozzáférés az adatokhoz a props.myData segítségével
}

Állapot (State): Az adatok kezelése a komponensen belül, amelyek idővel változhatnak. Kifejezetten a komponenshez tartozó adatokhoz használjuk.

import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0); // Állapot definiálása

  function handleClick() {
    setCount(count + 1); // Állapot módosítása
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

Context API: Megoldás a központi adathozzáféréshez, amely több beágyazott komponens számára elérhető anélkül, hogy props-on keresztül kellene átadni. Ideális globális vagy gyakran használt adatokhoz (pl. téma, hitelesítés).

import React, { createContext, useContext } from 'react';

// Kontextus létrehozása
const MyContext = createContext();

// Kontextus provider
function MyProvider({ children }) {
  const sharedData = "Shared Data";
  return (
    <MyContext.Provider value={sharedData}>
      {children}
    </MyContext.Provider>
  );
}

// Kontextus fogyasztó
function MyConsumerComponent() {
  const data = useContext(MyContext); // Hozzáférés az adatokhoz a useContext segítségével
  return <p>{data}</p>;
}

Egyéni hook-ok: Újrahasznosítható logika létrehozása külső forrásokból (pl. API) származó adatok eléréséhez.

import { useState, useEffect } from 'react';

function useFetchData(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const result = await response.json();
        setData(result);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    }
    fetchData();
  }, [url]); // Függőség az url-től

  return { data, loading, error };
}

// Hook használata
function DataDisplay() {
  const { data, loading, error } = useFetchData('https://api.example.com/data');

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;
  return <p>{JSON.stringify(data)}</p>;
}

Könyvtárak (pl. Redux, Zustand): Komplex állapotkezeléshez külső könyvtárakat alkalmaznak. Ezek központi adattárolást és változáskezelési mechanizmusokat kínálnak.

Hogyan férhetünk hozzá az adatokhoz React-ben?