React / Жагсаалт ба key

Жагсаалт ба key

Бодит апп дахь өгөгдлийн дийлэнх нь массив хэлбэртэй байдаг — хэрэглэгчдийн жагсаалт, мэдэгдлүүд, хичээлүүд, бүтээгдэхүүнүүд. React-д массиваас UI үүсгэхдээ .map() аргыг ашигладаг. Гэхдээ нэг чухал нюанс бий — React жагсаалтын элемент бүрт key props шаардана. Энэ хичээлд жагсаалт рендер хийх зөв аргыг эхнээс нь сурна.

.map() ашиглан жагсаалт рендер хийх

JavaScript-н .map() арга нь массивын элемент бүрийг шинэ зүйл болгон хөрвүүлдэг. React-д ийнхүү JSX болгон хөрвүүлнэ:

jsx

function CourseList() {
  const courses = ["JavaScript", "TypeScript", "React", "Next.js"];

  return (
    <ul>
      {courses.map((course) => (
        <li key={course}>{course}</li>
      ))}
    </ul>
  );
}

courses.map(...) нь <li> элементүүдийн массив буцаана. React энэ массивыг рендер хийж чаддаг. key props заавал байна — үгүй бол консолд анхааруулга гарна.

key гэж юу вэ, яагаад хэрэгтэй вэ?

key нь React-д жагсаалтын аль элемент өөрчлөгдсөн, нэмэгдсэн, устгагдсанийг таньж мэдэхэд туслана. Key нь тухайн жагсаалт дотор давтагдашгүй байх ёстой:

jsx

function UserList() {
  const users = [
    { id: 101, name: "Болд", xp: 450 },
    { id: 102, name: "Сарнай", xp: 820 },
    { id: 103, name: "Тэмүүлэн", xp: 310 },
  ];

  return (
    <div>
      {users.map((user) => (
        // ✅ Зөв — өгөгдлийн давтагдашгүй id ашиглана
        <div key={user.id}>
          <strong>{user.name}</strong>
          <span>{user.xp} XP</span>
        </div>
      ))}
    </div>
  );
}

Key нь DOM-д харагдахгүй — зөвхөн React-н дотоод ажиллагаанд ашиглагддаг.

Key-д index ашиглахаас зайлсхийх

Массивын index-г key болгон ашиглах нь нийтлэг алдаа юм:

jsx

function TaskList() {
  const tasks = ["Кодлох", "Тест бичих", "Деплой хийх"];

  return (
    <ul>
      {/* ❌ Буруу — жагсаалт өөрчлөгдөхөд алдаа гарч болно */}
      {tasks.map((task, index) => (
        <li key={index}>{task}</li>
      ))}

      {/* ✅ Зөв — өгөгдөл тогтвортой id-тай бол тэрийг ашиглана */}
      {tasks.map((task) => (
        <li key={task}>{task}</li>
      ))}
    </ul>
  );
}

Жагсаалт дарааллаа өөрчлөх, элемент устгах боломжтой бол index ашиглах нь React-г төөрөгдүүлдэг. Өгөгдлийн id байвал үргэлж тэрийг ашигла.

Component-тай жагсаалт

Жагсаалтын элемент бүрийг тусдаа component болгон гаргах нь код цэвэр байлгадаг:

jsx

function LessonItem({ lesson }) {
  return (
    <div className="lesson-item">
      <span className="order">{String(lesson.order).padStart(2, "0")}</span>
      <span className="title">{lesson.title}</span>
      {lesson.done && <span className="done">✓</span>}
    </div>
  );
}

function LessonList({ lessons }) {
  if (lessons.length === 0) {
    return <p>Хичээл байхгүй байна.</p>;
  }

  return (
    <div>
      {lessons.map((lesson) => (
        <LessonItem key={lesson.slug} lesson={lesson} />
      ))}
    </div>
  );
}

key-г <LessonItem> дээр тавина — LessonItem дотор тавихгүй. Key нь жагсаалтыг рендер хийж байгаа газарт л хэрэгтэй.

Жагсаалт шүүх ба эрэмбэлэх

.filter() ба .sort() аргуудыг .map()-тай хослуулан ашигладаг:

jsx

import { useState } from "react";

function FilteredList() {
  const [query, setQuery] = useState("");

  const courses = [
    { id: 1, slug: "javascript", title: "JavaScript үндэс" },
    { id: 2, slug: "typescript", title: "TypeScript үндэс" },
    { id: 3, slug: "react", title: "React үндэс" },
    { id: 4, slug: "python", title: "Python үндэс" },
  ];

  const filtered = courses.filter((course) =>
    course.title.toLowerCase().includes(query.toLowerCase()),
  );

  return (
    <div>
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Хайх..."
      />
      <p>{filtered.length} үр дүн</p>
      <ul>
        {filtered.map((course) => (
          <li key={course.id}>{course.title}</li>
        ))}
      </ul>
    </div>
  );
}

.filter() эхлээд массивыг шүүнэ, дараа нь .map() үр дүнг JSX болгон хөрвүүлнэ — энэ хослол React-д маш нийтлэг байдаг.

Дараагийн хичээлд:

HTML маягт (form) React-д хэрхэн ажилладгийг судална. Controlled component, onSubmit, олон талбар бүхий маягт, validation зэрэгтэй танилцана.

← Өмнөх хичээлНөхцөлт рендер Дараах хичээл →Маягт (Forms)