Training Docs

Appearance

🎣 Rendering & State (Hooks) ​

ใน React สิ่งที่ทำให้หน้าเว็บ "ขยับได้" หรือมีการเปลี่ยนแปลง (Interactive) คือ Hooks โดย 2 พระเอกหลักที่เราต้องรู้จักคือ useState และ useEffect

1. useState: จำข้อมูลใน Component ​

ปกติ Function Component จะลืมทุกอย่างเมื่อรันจบ แต่ useState ช่วยให้มัน "จำค่า" ได้ (เช่น จำว่ากดปุ่มไปกี่ครั้งแล้ว)

การใช้งาน ​

jsx
// 1. นำเข้า Hook
import { useState } from 'react';

function Counter() {
  // 2. ประกาศตัวแปร State [ค่าปัจจุบัน, ฟังก์ชันสำหรับเปลี่ยนค่า]
  const [count, setCount] = useState(0); 

  return (
    <div>
      <p>จำนวนครั้งที่กด: {count}</p>
      
      {/* 3. ใช้ฟังก์ชัน setCount เพื่อเปลี่ยนค่า */}
      <button onClick={() => setCount(count + 1)}>
        เพิ่มค่า
      </button>
    </div>
  );
}

กฎเหล็กของ State

ห้ามเปลี่ยนค่า count โดยตรง! (เช่น count = 5 ❌) ต้องเปลี่ยนผ่าน setCount(5) ✅ เท่านั้น เพื่อให้ React รู้ตัวและสั่งวาดหน้าจอใหม่ (Re-render)

2. useEffect: ทำงานเมื่อมีอะไรเปลี่ยน ​

useEffect ใช้จัดการ Side Effects หรือ "ผลกระทบข้างเคียง" ที่ไม่ได้เกิดจากการกดปุ่มโดยตรง เช่น

  • โหลดข้อมูลจาก API ทันทีที่เข้าหน้าเว็บ
  • ตั้งเวลา (SetInterval)
  • เปลี่ยน Title ของ Browser

รูปแบบพื้นฐาน ​

jsx
import { useEffect } from 'react';

useEffect(() => {
  // ทำอะไรสักอย่าง...
  console.log('ทำงานแล้ว!');

  // (Optional) Return ฟังก์ชันล้างค่าเมื่อ Component หายไป
  return () => {
    console.log('ล้างค่า...');
  };
}, [/* dependencies */]); // ❗️ สำคัญมาก

Dependency Array ([]) สำคัญอย่างไร? ​

Arrayผลลัพธ์
ไม่มีเลย useEffect(...)ทำงาน ทุกครั้ง ที่ Re-render (อันตราย! ระวัง Loop)
ว่างเปล่า useEffect(..., [])ทำงาน ครั้งเดียว ตอนเริ่ม (เหมือน componentDidMount)
มีตัวแปร useEffect(..., [count])ทำงานตอนเริ่ม + เมื่อค่า count เปลี่ยน

3. Handling Events (การดักจับเหตุการณ์) ​

ใน React เราใส่ Event Handler ไปใน JSX ได้เลย (ชื่อเป็น camelCase)

onClick (คลิกปุ่ม) ​

jsx
<button onClick={handleClick}>คลิกเลย</button>

onChange (พิมพ์ข้อความใน Input) ​

นี่คือหัวใจของการทำ Forms ใน React (Controlled Components)

jsx
function RegisterForm() {
  const [email, setEmail] = useState("");

  return (
    <div>
      <label>อีเมล: </label>
      <input 
        type="email" 
        value={email} // ให้ Input แสดงค่าจาก State
        onChange={(e) => setEmail(e.target.value)} // ดึงค่าใหม่มาใส่ State
      />
      
      <p>คุณกำลังพิมพ์: {email}</p>
    </div>
  );
}

4. Conditional Rendering (แสดงผลตามเงื่อนไข) ​

เราสามารถใช้ JavaScript Logic (if, &&, ?:) ในการซ่อน/แสดง Component ได้

ใช้ && (ถ้าจริง...แสดง) ​

jsx
{isLoggedIn && <LogoutButton />}

ใช้ Ternary (ถ้าจริง...แสดง A ถ้าไม่...แสดง B) ​

jsx
{status === 'success' ? <SuccessMessage /> : <ErrorMessage />}