Module 4: React හි State භාවිතය | React.js සිංහල පාඨමාලාව

Module 4 – React හි State හඳුනාගනිමු

State යනු React යෙදුම් වලට "මතකයක්" ලබා දෙන දෙයයි. පරිශීලක අන්තර්ක්‍රියා (user interactions) මත පදනම්ව UI එක වෙනස් කිරීමට state අත්‍යවශ්‍ය වේ.

40% සම්පූර්ණයි

State යනු කුමක්ද?

State යනු component එකක් තුළ "මතක තබා ගන්නා" දත්ත වේ. එය සාමාන්‍ය JavaScript variable එකක් මෙන් නොව, **state එක වෙනස් වන විට, React ස්වයංක්‍රීයව එම component එක නැවත render කර (re-render) UI එකේ ඇති වෙනස්කම් පෙන්වයි.**

උදාහරණයක් ලෙස, counter app එකක count අගය, form එකක user-input, toggle button එකක් on ද off ද යන්න වැනි දේවල් state හි ගබඩා කරනු ලැබේ.

State සහ සාමාන්‍ය Variable එකක වෙනස

ඔබ component එකක් තුළ සාමාන්‍ය `let count = 0;` වැනි variable එකක් සාදා, button click එකකින් එහි අගය වෙනස් කළහොත්, එම වෙනස UI එකේ දිස්වන්නේ නැත. কারণ React දන්නේ නැහැ එම variable එක වෙනස් වූ විට UI එක update කළ යුතු බව.

නමුත් ඔබ state භාවිතා කළ විට, React එම state එක "බලා සිටින" අතර, එය වෙනස් වූ විගස අදාළ component එක re-render කර UI එක යාවත්කාලීන කරයි. State is what makes React "reactive".

`useState` Hook එක භාවිතය

Functional components වලට state එකතු කිරීම සඳහා අපි React හි ඇති විශේෂ function එකක් වන useState hook එක භාවිතා කරමු.

පියවර 1: `useState` Import කිරීම

Component එකක state භාවිතා කිරීමට පෙර, file එකේ ඉහළින්ම `useState` hook එක React library එකෙන් import කරගත යුතුය.

import { useState } from 'react';

පියවර 2: State Variable එක නිර්මාණය කිරීම

`useState` hook එක call කළ විට, එය අගයන් දෙකක් සහිත array එකක් return කරයි:

State Variable: වත්මන් state අගය (උදා: `count`).
Setter Function: එම state අගය update කිරීමට භාවිතා කරන function එක (උදා: `setCount`).

අපි මේවා ලබාගැනීමට JavaScript හි "array destructuring" syntax එක භාවිතා කරමු.

function Counter() {
  const [count, setCount] = useState(0);
  
  // ... the rest of the component
}

මෙහි `useState(0)` යන්නෙන් අදහස් වන්නේ `count` state variable එකේ **ආරම්භක අගය (initial value) 0** බවයි. ඔබට මෙහි ඕනෑම අගයක් (number, string, boolean, array, object) ලබා දිය හැක.

පියවර 3: JSX තුළ State අගය පෙන්වීම

State variable එකේ අගය JSX තුළ පෙන්වීමට, curly braces `{}` භාවිතා කරන්න.

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>The current count is: {count}</h1>
    </div>
  );
}

Module 4: කුඩා කාර්යය (Mini Task)

අපි දැන් අපගේ App.jsx file එකේ `count` නමින් state variable එකක් නිර්මාණය කර, එහි අගය browser එකේ පෙන්වමු.

ඔබගේ src/App.jsx file එක විවෘත කරන්න.
File එකේ ඉහළින්ම, `useState` hook එක import කරගන්න:
```
import { useState } from 'react';
import Header from './components/Header.jsx';
```
`App` function එක තුළ, `count` නමින් නව state variable එකක් නිර්මාණය කරන්න. එහි ආරම්භක අගය `0` ලෙස දෙන්න.
```
function App() {
  const [count, setCount] = useState(0);
  
  // ... rest of the code
}
```

`return` statement එක තුළ, `Header` component එකට පහළින්, `count` අගය පෙන්වන `

` ටැගයක් එක් කරන්න.

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <Header />
      <main style={{ padding: '20px', textAlign: 'center' }}>
        <h2>Welcome to the Counter!</h2>
        <p style={{ fontSize: '2rem', fontWeight: 'bold' }}>
          Count: {count}
        </p>
      </main>
    </>
  );
}

File එක save කර ඔබගේ browser එක දෙස බලන්න. "Count: 0" ලෙස දිස්විය යුතුය. දැනට අපට මෙම අගය වෙනස් කිරීමට ක්‍රමයක් නැත. එය අපි ඊළඟ module එකේදී ඉගෙන ගනිමු!

පෙර කොටස ඊළඟ කොටස: Events