{"id":6832,"date":"2024-12-17T03:30:10","date_gmt":"2024-12-17T00:30:10","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/useeffect-ile-veri-cekme-ve-isleme-reactte-api-cagrilari\/"},"modified":"2024-12-17T03:30:10","modified_gmt":"2024-12-17T00:30:10","slug":"useeffect-ile-veri-cekme-ve-isleme-reactte-api-cagrilari","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/useeffect-ile-veri-cekme-ve-isleme-reactte-api-cagrilari\/","title":{"rendered":"useEffect ile Veri \u00c7ekme ve \u0130\u015fleme: React’te API \u00c7a\u011fr\u0131lar\u0131"},"content":{"rendered":"

useEffect ile Veri \u00c7ekme ve \u0130\u015fleme: React’te API \u00c7a\u011fr\u0131lar\u0131<\/p>\n

Merhaba! Fatih Soysal burada. Bu yaz\u0131da, React uygulamalar\u0131n\u0131zda veri \u00e7ekmek i\u00e7in olmazsa olmaz olan useEffect<\/code> hook’unu ve API \u00e7a\u011fr\u0131lar\u0131 yapmay\u0131 detayl\u0131 bir \u015fekilde ele alaca\u011f\u0131z. \u00d6zellikle, verileri al\u0131p uygulamam\u0131za entegre etmenin en yayg\u0131n yolu olan fetch<\/code> API’sini kullanaca\u011f\u0131z. \u00d6ncelikle, useEffect<\/code>‘in ne i\u015fe yarad\u0131\u011f\u0131n\u0131 ve neden veri \u00e7ekme i\u015flemlerinde bu kadar \u00f6nemli oldu\u011funu a\u00e7\u0131klayal\u0131m. Ard\u0131ndan, ad\u0131m ad\u0131m bir \u00f6rnek \u00fczerinde ilerleyece\u011fiz.<\/p>\n

useEffect Hook’unun G\u00fcc\u00fc<\/h2>\n

useEffect<\/code>, React’te bile\u015fenlerinizin yan etkilerini (side effects) y\u00f6netmenizi sa\u011flayan g\u00fc\u00e7l\u00fc bir hook’tur. Yan etki, bir bile\u015fenin d\u0131\u015f d\u00fcnyayla etkile\u015fim kurdu\u011fu her \u015feydir; \u00f6rne\u011fin, bir API’ye veri g\u00f6ndermek veya veri almak, DOM’u manip\u00fcle etmek gibi i\u015flemler. useEffect<\/code>, bile\u015feniniz render edildikten sonra veya belirli bir de\u011ferin de\u011fi\u015fti\u011finde \u00e7al\u0131\u015ft\u0131r\u0131lacak fonksiyonlar\u0131 tan\u0131mlaman\u0131za olanak tan\u0131r. Bu da veri \u00e7ekme i\u015flemlerini, bile\u015fenin durumu ile senkronize bir \u015fekilde y\u00f6netmemize imkan verir.<\/p>\n

Fetch API ile Veri \u00c7ekme<\/h2>\n

fetch<\/code>, JavaScript’te yerle\u015fik bir API olup, a\u011f istekleri g\u00f6ndermemizi sa\u011flar. Bu API ile bir URL’ye istek g\u00f6nderir, gelen yan\u0131t\u0131 i\u015fler ve verileri uygulamam\u0131za entegre ederiz. Bu i\u015flem genellikle useEffect<\/code> hook’u i\u00e7inde ger\u00e7ekle\u015ftirilir. \u00d6rne\u011fin, bir JSON verisi i\u00e7eren API’den veri \u00e7ekmek i\u00e7in a\u015fa\u011f\u0131daki kodu kullanabiliriz:<\/p>\n

\nuseEffect(() => {\n  const fetchData = async () => {\n    try {\n      const response = await fetch('https:\/\/api.example.com\/data');\n      if (!response.ok) {\n        throw new Error(HTTP error! status: ${response.status});\n      }\n      const data = await response.json();\n      \/\/ Verileri i\u015fleyin ve state'i g\u00fcncelleyin\n      setData(data);\n    } catch (error) {\n      console.error('Error fetching data:', error);\n      \/\/ Hata durumunu i\u015fleyin\n      setError('Veri \u00e7ekme i\u015fleminde bir hata olu\u015ftu.');\n    }\n  };\n\n  fetchData();\n}, []); \n<\/code><\/pre>\n
Bu kodda, bo\u015f bir dizi ([]<\/code>) ikinci parametre olarak verilmi\u015ftir.  Bu, useEffect<\/code>‘in sadece bir kere, bile\u015fen ilk render edildi\u011finde \u00e7al\u0131\u015ft\u0131r\u0131laca\u011f\u0131 anlam\u0131na gelir.  E\u011fer useEffect<\/code>‘i bir de\u011fi\u015fkenin durumuna ba\u011fl\u0131 olarak \u00e7al\u0131\u015ft\u0131rmak isterseniz, bu de\u011fi\u015fkeni ikinci parametre olarak vermeniz gerekir. \u00d6rne\u011fin, bir arama terimi de\u011fi\u015fti\u011finde API’ye yeni bir istek g\u00f6ndermek i\u00e7in bu de\u011fi\u015fkeni parametre olarak verebiliriz.<\/p>\n
Hata Y\u00f6netimi ve Y\u00fckleme Durumu<\/h2>\n
Yukar\u0131daki \u00f6rnekte, try...catch<\/code> blo\u011fu ile hata y\u00f6netimi yap\u0131lm\u0131\u015ft\u0131r.  Ayr\u0131ca, veri \u00e7ekme i\u015flemi s\u00fcrerken kullan\u0131c\u0131ya bir y\u00fckleme durumu g\u00f6stermek iyi bir kullan\u0131c\u0131 deneyimi sa\u011flar. Bunu, bir loading de\u011fi\u015fkeni kullanarak yapabiliriz.<\/p>\n
\nconst [loading, setLoading] = useState(true);\n\/\/ ... di\u011fer kodlar ...\n\nuseEffect(() => {\n  \/\/ ... di\u011fer kodlar ...\n  setLoading(false); \/\/ Veri \u00e7ekildikten sonra loading durumunu false yap\u0131n.\n}, []);\n<\/code><\/pre>\n
Sonu\u00e7 olarak, useEffect<\/code> ve fetch<\/code> API’sini kullanarak React uygulamalar\u0131n\u0131zda kolayca veri \u00e7ekebilirsiniz.  Unutmay\u0131n ki, hata y\u00f6netimi ve kullan\u0131c\u0131 deneyimi i\u00e7in ek \u00f6nlemler almak \u00f6nemlidir. Daha detayl\u0131 bilgi i\u00e7in kendi web sitemi<\/a>ni ziyaret edebilirsiniz.<\/p>\n
Ayr\u0131ca, bu konuda daha fazla bilgi edinmek i\u00e7in a\u015fa\u011f\u0131daki kaynaklara da g\u00f6z atabilirsiniz:<\/p>\n