{"id":12653,"date":"2025-02-16T18:00:12","date_gmt":"2025-02-16T15:00:12","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/reactte-sozlerin-gucu-ui-ve-is-mantiginin-ayrimi\/"},"modified":"2025-02-16T18:00:12","modified_gmt":"2025-02-16T15:00:12","slug":"reactte-sozlerin-gucu-ui-ve-is-mantiginin-ayrimi","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/reactte-sozlerin-gucu-ui-ve-is-mantiginin-ayrimi\/","title":{"rendered":"React’te S\u00f6zlerin G\u00fcc\u00fc: UI ve \u0130\u015f Mant\u0131\u011f\u0131n\u0131n Ayr\u0131m\u0131"},"content":{"rendered":"

<\/p>\n

React’te S\u00f6zlerin G\u00fcc\u00fc: UI ve \u0130\u015f Mant\u0131\u011f\u0131n\u0131n Ayr\u0131m\u0131<\/p>\n

Merhaba! Ben Fatih Soysal ve bug\u00fcn React uygulamalar\u0131nda temiz ve s\u00fcrd\u00fcr\u00fclebilir kod yazman\u0131n \u00f6nemli bir y\u00f6n\u00fc olan, kullan\u0131c\u0131 aray\u00fcz\u00fc (UI) ve i\u015f mant\u0131\u011f\u0131n\u0131n ayr\u0131m\u0131 hakk\u0131nda konu\u015faca\u011f\u0131z. \u00d6zellikle, bu ayr\u0131m\u0131 sa\u011flarken Promise’lerin nas\u0131l b\u00fcy\u00fck bir yard\u0131mc\u0131 olabilece\u011fini inceleyece\u011fiz. Bu ayr\u0131m, kodun okunabilirli\u011fini, test edilebilirli\u011fini ve \u00f6l\u00e7eklenebilirli\u011fini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131r. \u00d6ncelikle, neden bu ayr\u0131m\u0131n bu kadar \u00f6nemli oldu\u011funu anlamaya \u00e7al\u0131\u015fal\u0131m.<\/p>\n

UI kodunuzu i\u015f mant\u0131\u011f\u0131n\u0131zla kar\u0131\u015ft\u0131rmak, kodunuzun karma\u015f\u0131kla\u015fmas\u0131na ve bak\u0131m\u0131 zorla\u015ft\u0131rmas\u0131na yol a\u00e7ar. \u00d6rne\u011fin, bir API \u00e7a\u011fr\u0131s\u0131 sonucunu do\u011frudan UI bile\u015feninizde i\u015flerseniz, hata y\u00f6netimi ve test etme karma\u015f\u0131kla\u015f\u0131r. Ancak, bu i\u015flemleri ayr\u0131 fonksiyonlar veya servisler halinde ay\u0131r\u0131rsan\u0131z, kodunuz \u00e7ok daha d\u00fczenli ve anla\u015f\u0131l\u0131r olur. Burada devreye Promise’ler giriyor. Promise’ler, asenkron i\u015flemlerin sonu\u00e7lar\u0131n\u0131 y\u00f6netmek i\u00e7in m\u00fckemmel bir ara\u00e7t\u0131r. API \u00e7a\u011fr\u0131lar\u0131 gibi asenkron i\u015flemleri Promise’ler ile kaps\u00fclleyerek, UI bile\u015fenlerinizin i\u015f mant\u0131\u011f\u0131ndan ba\u011f\u0131ms\u0131z kalmas\u0131n\u0131 sa\u011flayabilirsiniz.<\/p>\n

Promise’ler ile Temiz Kod Yaz\u0131m\u0131<\/h2>\n

\u015eimdi, bir \u00f6rnek \u00fczerinden Promise’lerin nas\u0131l kullan\u0131laca\u011f\u0131n\u0131 g\u00f6relim. Diyelim ki bir kullan\u0131c\u0131 listesi \u00e7ekmek i\u00e7in bir API \u00e7a\u011fr\u0131s\u0131 yap\u0131yoruz. Bu i\u015flemi, UI bile\u015fenimizden ayr\u0131 bir fonksiyonda ger\u00e7ekle\u015ftirebiliriz:<\/p>\n

\n\/\/ kullan\u0131c\u0131Servisi.js\nimport axios from 'axios';\n\nconst getUsers = () => {\n  return axios.get('\/api\/users')\n    .then(response => response.data)\n    .catch(error => {\n      console.error(\"Kullan\u0131c\u0131lar al\u0131namad\u0131:\", error);\n      throw error; \/\/ Hatay\u0131 yukar\u0131ya f\u0131rlat\u0131yoruz.\n    });\n};\n\nexport default getUsers;\n<\/code><\/pre>\n
Bu fonksiyon, API \u00e7a\u011fr\u0131s\u0131n\u0131 yapar ve sonucu bir Promise olarak d\u00f6nd\u00fcr\u00fcr.  UI bile\u015fenimizde ise bu Promise’i kullanarak verileri i\u015fleyebiliriz:<\/p>\n
\n\/\/ KullaniciListesi.js\nimport React, { useState, useEffect } from 'react';\nimport getUsers from '.\/kullaniciServisi';\n\nconst KullaniciListesi = () => {\n  const [users, setUsers] = useState([]);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState(null);\n\n  useEffect(() => {\n    const fetchUsers = async () => {\n      try {\n        const fetchedUsers = await getUsers();\n        setUsers(fetchedUsers);\n      } catch (error) {\n        setError(error);\n      } finally {\n        setLoading(false);\n      }\n    };\n\n    fetchUsers();\n  }, []);\n\n  if (loading) return 
Y\u00fckleniyor...<\/p>;\n  if (error) return 
Hata olu\u015ftu: {error.message}<\/p>;\n\n  return (\n