{"id":3049,"date":"2024-11-05T15:45:12","date_gmt":"2024-11-05T12:45:12","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/%f0%9f%9a%80-uretim-hazir-typescript-ile-react-veri-getirme-kancasi-olusturma\/"},"modified":"2024-11-05T15:45:12","modified_gmt":"2024-11-05T12:45:12","slug":"%f0%9f%9a%80-uretim-hazir-typescript-ile-react-veri-getirme-kancasi-olusturma","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/%f0%9f%9a%80-uretim-hazir-typescript-ile-react-veri-getirme-kancasi-olusturma\/","title":{"rendered":"\ud83d\ude80 \u00dcretim Haz\u0131r TypeScript ile React Veri Getirme Kancas\u0131 Olu\u015fturma"},"content":{"rendered":"

\ud83d\ude80 \u00dcretim Haz\u0131r TypeScript ile React Veri Getirme Kancas\u0131 Olu\u015fturma<\/p>\n

React uygulamalar\u0131nda veri getirme, uygulaman\u0131n temel bir par\u00e7as\u0131d\u0131r. Verileri API’lerden, yerel depolama alanlar\u0131ndan veya di\u011fer kaynaklardan alabilir ve bunlar\u0131 kullan\u0131c\u0131 aray\u00fcz\u00fcnde g\u00f6r\u00fcnt\u00fclemek i\u00e7in kullanabiliriz. Bu i\u015flemi basitle\u015ftirmek i\u00e7in, React’in g\u00fc\u00e7l\u00fc \u00f6zelliklerinden biri olan **kancalar** kullanabiliriz. Bu makalede, TypeScript kullanarak \u00fcretim haz\u0131r bir React veri getirme kancas\u0131 nas\u0131l olu\u015fturulaca\u011f\u0131n\u0131 ad\u0131m ad\u0131m g\u00f6sterece\u011fim.<\/p>\n

Temel Kanca Yap\u0131s\u0131<\/h2>\n

\u0130lk ad\u0131m, veri getirme i\u015flemlerini ele alacak temel bir kanca yap\u0131s\u0131 olu\u015fturmakt\u0131r. Bu kanca, verileri getirebilecek, hata durumlar\u0131n\u0131 ele alabilecek ve y\u00fckleme durumunu y\u00f6netebilecek bir fonksiyon i\u00e7erecektir. \u0130\u015fte basit bir \u00f6rnek:<\/p>\n

“`typescript
\nimport { useState, useEffect } from ‘react’;<\/p>\n

interface UseFetchProps {
\n url: string;
\n}<\/p>\n

const useFetch = (props: UseFetchProps): {
\n data: T | null;
\n isLoading: boolean;
\n error: Error | null;
\n} => {
\n const [data, setData] = useState(null);
\n const [isLoading, setIsLoading] = useState(false);
\n const [error, setError] = useState(null);<\/p>\n

useEffect(() => {
\n const fetchData = async () => {
\n setIsLoading(true);
\n try {
\n const response = await fetch(props.url);
\n const json = await response.json();
\n setData(json);
\n } catch (error) {
\n setError(error as Error);
\n } finally {
\n setIsLoading(false);
\n }
\n };<\/p>\n

fetchData();
\n }, [props.url]);<\/p>\n

return { data, isLoading, error };
\n};<\/p>\n

export default useFetch;
\n“`<\/p>\n

Bu kod par\u00e7as\u0131nda, `useFetch` ad\u0131nda bir kanca olu\u015fturduk. Bu kanca, `url` parametresini al\u0131r ve bu URL’den veri getirmek i\u00e7in kullan\u0131l\u0131r. Kanca i\u00e7inde, `data`, `isLoading` ve `error` durumunu y\u00f6neten \u00fc\u00e7 durum de\u011fi\u015fkeni bulunmaktad\u0131r. `useEffect` kancas\u0131, `url` de\u011fi\u015firse veriyi yeniden getirmek i\u00e7in kullan\u0131lmaktad\u0131r.<\/p>\n

Hata \u0130\u015fleme<\/h2>\n

\u00dcretim haz\u0131r bir kanca, hata durumlar\u0131n\u0131 d\u00fczg\u00fcn bir \u015fekilde ele almal\u0131d\u0131r. Bu \u00f6rnekte, `try…catch` blo\u011fu kullanarak olas\u0131 hatalar\u0131 yakalad\u0131k ve `error` durum de\u011fi\u015fkenine atad\u0131k. Bu, kullan\u0131c\u0131lara hata mesajlar\u0131 g\u00f6r\u00fcnt\u00fclemek veya hata durumlar\u0131n\u0131 g\u00fcnl\u00fck kayd\u0131 i\u00e7in kullanmak i\u00e7in bir mekanizma sa\u011flar. <\/p>\n

Y\u00fckleme Durumu<\/h2>\n

Veri getirme i\u015flemi s\u0131ras\u0131nda kullan\u0131c\u0131lara bir y\u00fckleme g\u00f6stergesi sunmak, kullan\u0131c\u0131 deneyimini iyile\u015ftirmek i\u00e7in \u00f6nemlidir. `isLoading` durum de\u011fi\u015fkenini kullanarak, veri getirilirken bir y\u00fckleme g\u00f6stergesi g\u00f6stermek veya i\u00e7eri\u011fi gizlemek i\u00e7in ko\u015fullu olarak render edebiliriz.<\/p>\n

Ba\u011f\u0131ml\u0131l\u0131klar<\/h2>\n

`useEffect` kancas\u0131n\u0131n ikinci parametresi, ba\u011f\u0131ml\u0131l\u0131klar listesidir. Bu liste, kancan\u0131n yeniden y\u00fcr\u00fct\u00fclmesi gereken de\u011fi\u015fkenleri tan\u0131mlar. Bu \u00f6rnekte, `url` de\u011fi\u015fkenini ba\u011f\u0131ml\u0131l\u0131k olarak ekledik, b\u00f6ylece `url` de\u011fi\u015fti\u011finde veri yeniden getirilir.<\/p>\n

TypeScript ile Tip G\u00fcvenli\u011fi<\/h2>\n

TypeScript’i kullanmak, veri getirme kancas\u0131na tip g\u00fcvenli\u011fi sa\u011flayarak hata ay\u0131klamay\u0131 ve kod s\u00fcrd\u00fcr\u00fclebilirli\u011fini iyile\u015ftirir. `T` tipi parametresi, veri t\u00fcr\u00fcn\u00fc belirlemek i\u00e7in kullan\u0131l\u0131r ve `useFetch` kancas\u0131, beklenen veri t\u00fcr\u00fcne uygun de\u011ferler d\u00f6nd\u00fcr\u00fcr.<\/p>\n

Kullan\u0131m \u00d6rne\u011fi<\/h2>\n

\u0130\u015fte `useFetch` kancas\u0131n\u0131 nas\u0131l kullanabilece\u011finize dair bir \u00f6rnek:<\/p>\n

“`typescript
\nimport React from ‘react’;
\nimport useFetch from ‘.\/useFetch’;<\/p>\n

const MyComponent = () => {
\n const { data, isLoading, error } = useFetch({ url: ‘https:\/\/api.example.com\/data’ });<\/p>\n

if (isLoading) {
\n return <\/p>\n

Y\u00fckleniyor…<\/div>\n

;
\n }<\/p>\n

if (error) {
\n return <\/p>\n

Bir hata olu\u015ftu: {error.message}<\/div>\n

;
\n }<\/p>\n

return (<\/p>\n

\n Veri<\/p>\n