Aký je rozdiel medzi props a stavom v Reacte?

Propse (props) a stav (state) sú dva kľúčové mechanizmy na riadenie údajov v komponentoch React.

Propse:

• Prenášajú sa od rodičovského k komponentu dieťaťa.
• Sú nemeniteľné (immutable) vnútri dieťaťa.
• Umožňujú komponentom navzájom komunikovať.
• Určujú vzhľad alebo správanie komponentu na základe vstupných údajov.

Stav:

• Patrí konkrétnemu komponentu a je ním riadený.
• Je meniteľný (mutable) vnútri komponentu.
• Predstavuje údaje, ktoré sa môžu meniť v čase a ovplyvňovať renderovanie komponentu.
• Zmena stavu spôsobí opätovné renderovanie komponentu a jeho potomkov.

Hlavné rozdiely možno predstaviť vo forme tabuľky:

Charakteristika	Propse	Stav
Zdroj	Rodičovský komponent	Sám komponent
Meniteľnosť	Nemeniteľné	Meniteľný
Riadenie	Prenášajú sa zvonku	Riadi sa vnútri komponentu
Účel	Zobrazenie údajov zvonku, nastavenie	Riadenie vnútorného stavu komponentu
Zmena spôsobí	Opätovné renderovanie pri zmene v rodičovi	Opätovné renderovanie pri zmene v aktuálnom komponente

Príklad použitia propov:

// ParentComponent.jsx
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const message = "Ahoj od rodiča!";
  return (
    <div>
      <ChildComponent text={message} /> {/* Prenos prop "text" */}
    </div>
  );
}

export default ParentComponent;

// ChildComponent.jsx
import React from 'react';

function ChildComponent(props) {
  return (
    <p>{props.text}</p> {/* Použitie prop "text" */}
  );
}

export default ChildComponent;

Príklad použitia stavu:

// Counter.jsx
import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // Inicializácia stavu "count"

  const increment = () => {
    setCount(count + 1); // Zmena stavu
  };

  return (
    <div>
      <p>Počítadlo: {count}</p>
      <button onClick={increment}>Zvýšiť</button>
    </div>
  );
}

export default Counter;