React ile Event Listener ve Event Emitter Kullanımı
React.js ile Event Listener Kullanımı
JavaScript dünyasındaki geliştiricilerin tamamı Event Listener ile işlem gerçekleştirmiştir. Event çeşitlerinden bazılarına örnek vermek gerekirse click, change, dblclick, drag and drop, focus, hover, keyboard events, mouse events olabilir. Daha fazlası için tıklayınız.
Normal bir JavaScript dosyasında kullanabildiğiniz gibi React projesi içerisinde de window.addEventListener ile bir Event Listener yaratabilirsiniz.
Konumuzun daha anlaşılır olması için bir NextJS projesi oluşturup basit bir uygulama geliştirelim. Senaryomuz ise klavyeden tuşlanan bir tuşun keyCode değerini ekranda gösterebilmek olsun.
Örnekte verilen kod içerisinde klavyeye basılma olayı dinlenerek hangi tuşa basıldığı ekranda gösterilmektedir. Bu şekilde eklenirse Component Render süresi bitmeden Event tetiklenmektedir.
Oluşturulan bir Event sistem içerisinde sonsuz döngüye yol açmaktadır. Bizim istediğimiz ise Render işleminin tamamlanmasından sonra bu işlemin gerçekleşmesidir. İlk adım bu kodun useEffect içerisinde eklenmesi olacaktır.
Bu sorunun çözümü ise eklenilen Event Listener’ın kaldırılma aksiyonudur. Sonsuz döngülerle alakalı detaylı bilgiye buradan ulaşabilirsiniz. Gerekli güncellemelerden sonra kodumuzun son hali aşağıdaki gibidir.
Burada elde ettiğimiz bilgiler ile uygulama içerisinde Keycode kombinasyonlarını kullanarak otomatik olarak işlemler yapılabilir. Örnek olarak arama kutusunun açılması (GitHub üzerinde Ctrl+K,Cmd+K), gönder butonunun tetiklenmesi (Ctrl+Enter, Cmd+Enter) gibi.. Projenin reposuna ve çalışır haline buradan ulaşabilirsiniz.
React.js ile Event Emitter Kullanımı
Node.js dünyasında Event oluşturmak için kullanılan EventEmitter sınıfının React ile kullanımı üzerinde duracağız.
React geliştiriciler için bir değeri(state) üst katmanlarda olan Component’lere veya bağlantısı olmayan farklı bir componente aktarmak için Global State Management yöntemleri kullanılmaktadır. Bunlara örnek olarak herkesin bildiği ContextAPI, Redux ve Zustand verilebilir. Küçük uygulamalarda ise bu paketlerin eklenmesi gereksiz olarak maliyet ve çok fazla konfigürasyon demektir. Bunun gibi süreçlerden kaçınmak için çözüm Event Emitter kullanımıdır.
Oluşturduğumuz proje içerisinde EventManager adında bir sınıf tanımlayıp ilgili aksiyonları bu sınıf üzerinden ilerletelim. Sınıf içerisine addListener-removeListener, on-off, once vb. değerler tanımlayarak kullanımına geçelim. Örnekte on ve emit değerleri kullanılmıştır. Daha fazlası için tıklayınız.
Oluşturulan bu sınıf sayesinde farklı sayfalarda veya lokasyonlarda bulunan Component’ler arası veri aktarımı yapılabilmektedir. EventManager.emit ile ilgili eventType ı tetikleyip istediğimiz yerde EventManager.on ile değeri yakalayabilmekteyiz.
Detay sayfasından fırlatılan bir Event olan detailButtonClicked aksiyonu ile detay içerisindeki ürün bilgilerini farklı bir State aktarım yöntemi kullanmadan Event Emitter ile sepet Component’i üzerinden yakalayabileceğiz.
Detay sayfasından EventManager.emit ile gelen değerleri useEffect içerisinde EventManager.on ile ilgili detailButtonClicked değerini ekleyerek istediğimiz gibi aksiyonlar alabilmekteyiz. useEffect ilk Render anında çalışıyor olmasına rağmen EventEmitter sayesinde her Event tetiklendiğinde ilgili EventManager.on tetiklenecektir. Örnek olarak verilen geliştirmeyi aşağıdan inceleyebilirsiniz.
Bu makalede yararlandığım kaynaklar;
