Модуль 11

Умовний рендеринг

Ось урок на тему "Умовний рендеринг", створений у стилі CS50: енергійно, з аналогіями та акцентом на "чому" і "як".

🎓 CS50: Умовний рендеринг (Conditional Rendering)

Привіт, друзі! Радий бачити вас знову.

1. 🔥 Вступ: Хаос без контролю

Уявіть собі, що ви заходите у свій улюблений банківський застосунок. І що ви бачите? Ви бачите кнопку "Увійти". Поруч із нею — кнопку "Вийти". Трохи нижче — "Ваш баланс: 1000$" і водночас напис "Будь ласка, авторизуйтесь". А ще — кнопку "Адмін-панель", хоча ви звичайний користувач.

Звучить як хаос, правда?

Якби у світі веброзробки не існувало нашої сьогоднішньої теми, саме так виглядав би кожен сайт. Інтерфейс вивалював би на користувача все, що в нього є, одночасно.

Але в реальному житті все працює інакше. * Коли ви приходите додому і вмикаєте світло — темрява зникає. Ви не бачите і світло, і темряву одночасно. * Коли ви відкриваєте коробку з піцою — ви бачите піцу. Коли з'їли — бачите порожню коробку.

Питання до вас: Чому ж наш код має бути дурнішим за коробку з-під піци?

Він і не повинен. Сьогодні ми навчимо наші програми думати. Ми навчимо їх показувати саме те, що потрібно, і саме тоді, коли це потрібно.

Тема уроку — Умовний рендеринг. Поїхали!

2. 🧠 Теоретична база: Фейс-контроль для вашого коду

Давайте розберемося, що це таке, без складних слів.

Умовний рендеринг — це процес, коли програма вирішує, які елементи малювати на екрані (рендерити), базуючись на певних умовах (даних, стані, діях користувача).

Як це працює "під капотом"?

Уявіть, що ваш код — це охоронець (фейс-контроль) на вході в нічний клуб (вашу вебсторінку). До нього підходять шматки HTML-коду і кажуть: "Я хочу всередину, на екран!".

Охоронець дивиться в список правил (вашу логіку): 1. Ти хто? — "Я кнопка 'Вийти'". 2. Яка зараз умова? — "Користувач не залогінений". 3. Рішення: "Тобі не можна. Зникни".

🔑 Що треба запам'ятати (Логіка > Синтаксис):

У JavaScript (і в більшості мов) все зводиться до Boolean (правда або брехня). Ми використовуємо три основні інструменти:

  1. Класичний if / else — як у звичайній розмові: "Якщо дощ — бери парасолю, інакше — окуляри".
  2. Тернарний оператор (? :) — це скорочений if/else. Виглядає як питання: Дощ? Парасоля : Окуляри.
  3. Логічне "І" (&&) — використовується, коли "інакше" не потрібно. "Якщо є гроші — купи каву". (Якщо грошей немає — нічого не роби, просто йди далі).

Інтуїтивно: Думайте про це як про залізничну стрілку. Поїзд (код) їде прямо, але залежно від положення важеля (умови), він поверне або ліворуч (показати картинку), або праворуч (показати текст).

3. 🧪 Приклади: Від простого до реального

Ми будемо використовувати синтаксис, схожий на React (JSX), бо він найпопулярніший, але логіка працює скрізь.

Рівень 1: Вітання (If / Else)

Ситуація: У нас є змінна isLoggedIn. Питання: Що ми хочемо побачити, якщо вона true? А якщо false?

function Greeting({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h1>Привіт, друже! 👋</h1>;
  }
  return <h1>Увійдіть, будь ласка. 🔒</h1>;
}

Що тут відбувається? Це так званий Early Return (раннє повернення). Якщо умова справдилася, ми віддаємо результат і функція припиняється. До другого рядка код навіть не дійде. Це чисто і професійно.

Рівень 2: Секретна інформація (Logical &&)

Ситуація: Ви показуєте профіль користувача. Якщо він має статус "VIP", треба показати корону біля імені. Якщо ні — нічого не показувати (не треба показувати "хрестик" чи "не VIP").

function UserProfile({ name, isVip }) {
  return (
    <div className="profile">
      <h2>{name}</h2>
      {/* Читається як: Якщо isVip ПРАВДА, то покажи корону */}
      {isVip && <span className="icon">👑 VIP Клієнт</span>}
    </div>
  );
}

Чому це працює? У JavaScript, якщо ліва частина && (isVip) є false, то права частина навіть не читається. Браузер її ігнорує.

Рівень 3: Кнопка перемикач (Тернарний оператор)

Ситуація: Типова задача — кнопка, яка змінює текст залежно від стану. Наприклад, "Темна тема" / "Світла тема".

// Питання до студента: Як записати це в один рядок, не використовуючи if?

<button>
  { isDarkMode ? '☀️ Увімкнути світло' : '🌙 Вимкнути світло' }
</button>

Аналіз: Це компактно. Це елегантно. Ми питаємо: isDarkMode правда? Якщо так — перше значення. Якщо ні — друге (після двокрапки).

4. 🛠 Практична частина

Час закачати рукави! Ось ваші завдання. Не бійтеся помилятися, компілятор не кусається.

Завдання 1: "Гаражні ворота" Напишіть код (можна псевдокод), який приймає змінну isOpen. * Якщо true — виведіть текст "Ворота відчинено, заїжджай!". * Якщо false — виведіть "Зачинено. Чекай". * Використовуйте тернарний оператор.

Завдання 2: "Нові повідомлення" У вас є масив messages = ['Привіт', 'Як справи?']. Використайте оператор &&, щоб вивести напис: "У вас є нові повідомлення!", але тільки якщо довжина масиву messages.length більше 0.

Завдання 3: "Виправити баг" (Класика) Студент написав такий код для кошика покупок: { count && <h1>Товарів у кошику: {count}</h1> } Коли count дорівнює 0, на екрані з'являється просто цифра 0. Чому? Як це виправити, щоб не показувалося взагалі нічого? (Підказка: згадайте, як JS сприймає цифру 0).

Завдання 4: Міні-кейс "Завантаження" Створіть логіку для компонента, який має 3 стани: 1. isLoading = true -> показує спінер (кружечок завантаження). 2. error = true -> показує червоний текст "Помилка завантаження". 3. Якщо все ок -> показує список даних. Порядок перевірки має значення!

5. 💡 Мислення як у розробника

Ви вже знаєте синтаксис. Але як думає Senior-розробник?

1. Уникайте "Пекла тернарників"

Новачки люблять вкладати умови одна в одну: isLogged ? (isAdmin ? 'Admin' : 'User') : 'Guest' Це працює, але це боляче читати. Порада: Якщо умов більше двох — використовуйте звичайний if/else або switch до моменту рендерингу. Код пишеться для людей, а не для машин.

2. Пастка з нулем (відповідь на Завдання 3)

У JavaScript цифра 0 — це "falsy" (брехня). Але коли React бачить 0 && <Component />, він думає: "Окей, зліва 0, я його повертаю і зупиняюсь". І він малює нуль на екрані. Профі-фікс: Завжди перевіряйте довжину явно: count > 0 && ... або !!count && ....

3. Чистота інтерфейсу

Не ховайте важливі елементи занадто глибоко в умови. Якщо кнопка "Купити" зникає і з'являється хаотично, користувач думатиме, що сайт зламався. Іноді краще показати неактивну (сіру) кнопку (disabled), ніж зовсім її прибирати.

6. 🧩 Підсумок

Отже, що ми сьогодні зробили? Ми перетворили наш "дурний" статичний код на динамічний та інтелектуальний.

  • Тепер ваш інтерфейс реагує на події.
  • Він знає, коли мовчати, а коли говорити.
  • Ви навчилися керувати потоком візуальної інформації.

Ви тепер, по суті, режисер свого застосунку. Ви вирішуєте, хто виходить на сцену в першому акті, а хто чекає за лаштунками до фіналу.

Що далі? Гаразд, ми вміємо показувати один елемент за умовою. А що, якщо у нас є список зі 100 товарів? Не будемо ж ми писати 100 умов? У наступному уроці ми поговоримо про Списки та Ключі (Lists & Keys) — як генерувати інтерфейс із масивів даних.

А поки що — це був CS50. Практикуйтесь!

← До списку уроків Наступний урок →