{"id":17327,"date":"2025-04-06T08:45:15","date_gmt":"2025-04-06T05:45:15","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/gelismis-react-bilesen-desenleri-ve-durum-yonetimi\/"},"modified":"2025-04-06T08:45:15","modified_gmt":"2025-04-06T05:45:15","slug":"gelismis-react-bilesen-desenleri-ve-durum-yonetimi","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/gelismis-react-bilesen-desenleri-ve-durum-yonetimi\/","title":{"rendered":"Geli\u015fmi\u015f React Bile\u015fen Desenleri ve Durum Y\u00f6netimi"},"content":{"rendered":"

<\/p>\n

Geli\u015fmi\u015f React Bile\u015fen Desenleri ve Durum Y\u00f6netimi<\/p>\n

Merhaba! Fatih Soysal olarak, React.js serimizin be\u015finci b\u00f6l\u00fcm\u00fcnde, geli\u015fmi\u015f bile\u015fen desenleri ve \u00f6zellikle durum y\u00f6netimi \u00fczerine odaklanaca\u011f\u0131z. \u00d6nceki b\u00f6l\u00fcmlerde temelleri att\u0131ysak, bu b\u00f6l\u00fcmde uygulamalar\u0131n\u0131z\u0131 bir \u00fcst seviyeye ta\u015f\u0131yacak teknikleri ele alaca\u011f\u0131z. Karma\u015f\u0131k uygulamalar geli\u015ftirmenin zorluklar\u0131ndan biri, bile\u015fenler aras\u0131 verinin etkili bir \u015fekilde y\u00f6netilmesidir. \u0130\u015fte tam da bu noktada, durum y\u00f6netimi teknikleri devreye giriyor. Bu makalede, hem basit hem de karma\u015f\u0131k senaryolarda i\u015finize yarayacak bir\u00e7ok deseni ve y\u00f6ntemi inceleyece\u011fiz.<\/p>\n

Bile\u015fen Bile\u015fimi ve Yeniden Kullan\u0131labilirlik<\/h2>\n

B\u00fcy\u00fck uygulamalar, genellikle k\u00fc\u00e7\u00fck, \u00f6zelle\u015fmi\u015f ve yeniden kullan\u0131labilir bile\u015fenlerden olu\u015fur. Bu bile\u015fenleri etkili bir \u015fekilde birle\u015ftirmek, uygulaman\u0131z\u0131n mimarisini ve bak\u0131m\u0131n\u0131 kolayla\u015ft\u0131r\u0131r. \u00d6rne\u011fin, bir form bile\u015fenini birden \u00e7ok sayfada kullanabilir ve sadece k\u00fc\u00e7\u00fck ayarlamalar yaparak farkl\u0131 ihtiya\u00e7lar\u0131n\u0131za uyarlayabilirsiniz. Bu da kod tekrar\u0131n\u0131 \u00f6nler ve bak\u0131m maliyetlerini d\u00fc\u015f\u00fcr\u00fcr. Ayr\u0131ca, bu yakla\u015f\u0131m, uygulaman\u0131n daha anla\u015f\u0131l\u0131r ve okunabilir olmas\u0131n\u0131 sa\u011flar. Burada, prop drilling sorununu ele almak i\u00e7in Context API veya Redux gibi durum y\u00f6netimi \u00e7\u00f6z\u00fcmlerinin nas\u0131l faydal\u0131 oldu\u011funu g\u00f6rece\u011fiz.<\/p>\n

Durum Y\u00f6netimi Teknikleri: Redux ve Context API<\/h2>\n

React uygulamalar\u0131nda durum y\u00f6netimi i\u00e7in iki pop\u00fcler yakla\u015f\u0131m mevcuttur: Redux ve Context API. Redux, \u00f6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalar i\u00e7in tercih edilen, g\u00fc\u00e7l\u00fc bir durum y\u00f6netimi k\u00fct\u00fcphanesidir. \u00d6te yandan, Context API, daha k\u00fc\u00e7\u00fck uygulamalar veya basit durum y\u00f6netimi ihtiya\u00e7lar\u0131 i\u00e7in daha uygun bir se\u00e7enektir. Ancak, Context API’nin daha az karma\u015f\u0131k olmas\u0131na ra\u011fmen, Redux’un sa\u011flad\u0131\u011f\u0131 geli\u015fmi\u015f \u00f6zellikler, b\u00fcy\u00fck projelerde daha iyi bir \u00f6l\u00e7eklenebilirlik sunar. Se\u00e7iminiz, projenizin b\u00fcy\u00fckl\u00fc\u011f\u00fcne ve karma\u015f\u0131kl\u0131\u011f\u0131na ba\u011fl\u0131d\u0131r.<\/p>\n

Redux ile Durum Y\u00f6netimi<\/h3>\n

Redux, tek bir kaynaktan durum y\u00f6netimi sa\u011flayan, \u00f6nceden tahmin edilebilir bir mimari sunar. Bu, uygulaman\u0131z\u0131n farkl\u0131 b\u00f6l\u00fcmlerinin veriler \u00fczerinde senkronize bir \u015fekilde \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar. Redux’un kullan\u0131m\u0131, action’lar, reducer’lar ve store gibi \u00f6nemli kavramlar\u0131 \u00f6\u011frenmeyi gerektirir. Bu kavramlar\u0131 anlamak i\u00e7in detayl\u0131 \u00f6rnekler ve a\u00e7\u0131klamalar sunaca\u011f\u0131m. A\u015fa\u011f\u0131da basit bir Redux \u00f6rne\u011fi verilmi\u015ftir:<\/p>\n

\n\/\/ action\nconst INCREMENT = 'INCREMENT';\n\n\/\/ reducer\nconst counterReducer = (state = 0, action) => {\n  switch (action.type) {\n    case INCREMENT:\n      return state + 1;\n    default:\n      return state;\n  }\n};\n\n\/\/ store\nconst store = createStore(counterReducer);\n<\/code><\/pre>\n
Context API ile Durum Y\u00f6netimi<\/h3>\n
Context API, bile\u015fenler aras\u0131nda veri payla\u015f\u0131m\u0131n\u0131 basitle\u015ftiren yerle\u015fik bir React \u00f6zelli\u011fidir.  Redux’a g\u00f6re daha basit ve hafiftir.  Ancak,  karma\u015f\u0131k uygulamalarda  Context API’nin y\u00f6netimi zorla\u015fabilir.  \u00d6zellikle b\u00fcy\u00fck veri k\u00fcmeleriyle \u00e7al\u0131\u015f\u0131rken,  performans sorunlar\u0131na yol a\u00e7abilir.  Bu nedenle, proje \u00f6l\u00e7e\u011finizi g\u00f6z \u00f6n\u00fcnde bulundurarak do\u011fru y\u00f6ntemi se\u00e7mek \u00f6nemlidir.<\/p>\n
Hook’lar ile Durum Y\u00f6netimi<\/h2>\n
React Hook’lar\u0131, fonksiyonel bile\u015fenlerde durum y\u00f6netimi ve di\u011fer \u00f6zelliklere eri\u015fimi kolayla\u015ft\u0131r\u0131r.  useState ve useReducer hook’lar\u0131,  durum y\u00f6netimi i\u00e7in s\u0131k\u00e7a kullan\u0131l\u0131r. useReducer, \u00f6zellikle karma\u015f\u0131k durum g\u00fcncelleme mant\u0131\u011f\u0131 olan durumlarda kullan\u0131\u015fl\u0131d\u0131r.  Bu hook’lar ile,  class bile\u015fenlerine ihtiya\u00e7 duymadan temiz ve okunabilir kod yazabilirsiniz.   Daha geli\u015fmi\u015f durum y\u00f6netimi i\u00e7in useContext hook’unu da kullanabilirsiniz.<\/p>\n
Sonu\u00e7<\/h2>\n
Bu makalede, geli\u015fmi\u015f React bile\u015fen desenleri ve durum y\u00f6netimi tekniklerini inceledik.  Redux ve Context API aras\u0131ndaki farklar\u0131,  hook’lar\u0131n kullan\u0131m\u0131n\u0131 ve bile\u015fenlerin etkili bir \u015fekilde nas\u0131l birle\u015ftirilece\u011fini \u00f6\u011frendik.  Uygulaman\u0131z\u0131n b\u00fcy\u00fckl\u00fc\u011f\u00fcne ve karma\u015f\u0131kl\u0131\u011f\u0131na ba\u011fl\u0131 olarak en uygun y\u00f6ntemi se\u00e7meniz \u00f6nemlidir.  Unutmay\u0131n ki,  kodun okunabilirli\u011fi ve s\u00fcrd\u00fcr\u00fclebilirli\u011fi her zaman \u00f6ncelikli olmal\u0131d\u0131r.  Daha fazla bilgi i\u00e7in,  fatihsoysal.com<\/a> adresini ziyaret edebilirsiniz.  Ayr\u0131ca,  konu hakk\u0131nda daha fazla bilgi edinmek i\u00e7in a\u015fa\u011f\u0131daki kaynaklar\u0131 inceleyebilirsiniz:<\/p>\n