React için daha zor Technical Interview soruları — Bölüm #1
(Giriş) Merhaba, ben Eren. Uzun zamandır bir medium yazısı yazmayı düşünüyordum ancak hangi konu hakkında yazacağımı bulamıyordum. Artık kendi hayatımda yaşadığım zorluklardan bir şeyler çıkararak yazmayı planlıyorum.
(Açıklama) React için interview soruları ararken hep bir nebze de olsa kolay sorular ile karşılaşıyordum. useState nedir, class içerisinde consructor ne işe yarar, super fonksiyonu nedir, react-router nasıl kullanılır gibi gibi. Bu sorular genel sorular olduğundan insan kafasından sallayarak bile cevap verebiliyor. Ben de teknik görüşmelerde sorulabilecek daha zor sorular türettim. Hem de bir Frontend Developer olarak technical interview’lara hazırlanmama yardımcı olacak. Sanırım bu soruları Mid-level bir Frontend Developer kolaylıkla cevaplayabilecektir.
Kolaydan zora olacak şekilde buraya aktaracağım. Unutmayın: Akılda kalıcı olması amacıyla cevapları aşırı detaylı yazmadım. Eğer istek olursa daha da detaylı cevapların olduğu bir yazı yazmayı planlıyorum. Belki ileride videolar da çekerim. Hadi başlayalım.
Soru #1 — React Nedir? React’tan ne anlıyoruz?
Cevap: React, JavaScript dili ile geliştirilmiş browserlarda çalışan açık kaynak kodlu bir kütüphanedir. Bu kütüphanenin çıkış amacı, arayüz geliştirmelerini daha da kolay hale getirmektir. Meta (Facebook) tarafından desteklenmektedir ve kullanılmaktadır.
Instagram ve Whatsapp gibi büyük uygulamalar React’ın mobil versiyonu olan React Native’in kendi ihtiyaçlarına göre modifiyeli versiyonlarını kullanırlar. Bunun en büyük avantajı piyasada en çok bilinen şirketlerin kullanımı dolayısı ile desteğinin de fazla olmasıdır. Ve piyasada bu kadar tercih edilmesinin sebebi, kolay öğrenimi ve çok fazla desteğinin bulunmasıdır.
Yani herhangi bir sorunla karşılaşıyorsanız ve uygulamanızı React ile yazıyorsanız %90 karşılaşılan sorunun cevabı Stackoverflow’da mevcuttur. Ayrıca React için “ne isterseniz” veya “ne hayal edebilirseniz” o paket büyük ihtimalle daha önce başkası tarafından hayal edilip, kodu yazılıp açık kaynak kodlu olarak sunulmuştur.
Soru #2 — SPA (Single Page Application) nedir?
Cevap: SPA, yani tek sayfa uygulama, eğer uygulamamız basit ise ve bir sayfadan oluşacaksa buna SPA diyebiliriz. Tabii ki basit olması şart değil ancak iyi bir örnek olur. Örneğin: Eğer uygulama başka sayfalara gitmek yerine tek bir sayfada bütün işlemlerinizi yapmanıza izin veriyorsa. Login olmak istediğinizde ./login sayfasına gitmek yerine ekranda modal çıkartıp orada login olmanıza olanak tanıyor ise.
SPA ile sayfa geçişlerinde sayfanın tekrardan yüklenmesine gerek kalmaz, yani SPA sayesinde sayfa hiç bir zaman yenilenmez. Bu da JS ve CSS dosyalarının tekrar yüklenmemesiyle, dolayısıyla daha performanslı bir uygulamaya olanak sağlar.
Soru #3— SSR (Serverside Rendering) nedir?
Cevap: React’ta sayfaların yüklenmesi için JavaScript kodunun browser içerisinde çalışması gerekir ve buna Clientside Rendering (CSR) denir.
CSR’nin dezavantajları vardır. Sayfayı JS çalıştırmayan bir browserda çalıştırdığınızda sayfa JS çalışmayacağı için yüklenmez. Crawler ve türevleri için elementler yüklenmeyeceğinden bu durum sorun oluşturur ve SEO açısından dezavantaj sağlar. Aslında herhangi bir CSR aplikasyonda sağ tıklayıp kaynağı görüntüle dediğinizde uygulamayı oluşturan HTML elementlerini göremezsiniz.
Burada Sunucu taraflı render etme yani SSR devreye giriyor. NextJS buna en iyi örnek olur. Yazdığımız React kodlarını sunucu tarafında render edip client’a render edilmiş hazır sayfayı gönderir. SSR’ın da dezavantajları bulunabilir ancak bunlar CSR’ye göre tolare edilebilir şeylerdir. Örneğin sayfa çok ağır ise FCP yani ilk sayfa yüklenmesi fazla olabilir. Bu da sayfanın yavaş yüklenmesi demektir.
Soru #4 — Unidirectional data flow nedir?
Cevap: React içerisinde bilgi aktarımı hep yukarıdan aşağıya (parent to child) şeklinde olur. Buna Unidirectional data flow denir. Yani bir component’e veri aktarmak istersek bunu prop kullanarak yaparız. Aşağıdan yukarıya (child to parent) veri aktarımı için prop kullanamayız (fonskiyon parametreleri haricinde). Aşağıdan yukarı veri akışı için örn. Context veya Redux gibi çözümlere başvurmalıyız. Ayrıca prop ile yukarıdan gelen veriyi component içerisinde değiştiremeyiz. Değiştirmek için parent’ın setState’ini prop olarak göndeririz ancak bu durum asla tercih edilmemelidir.
Soru #5 — React içerisindeki bir Element ile Component’in farkı nedir?
Cevap: React içerisinde elementten kastımız örn. <div> <a> ‘dır. Bu elementler tek başlarına bir işlev göstermezler. Nasıl HTML elementi tek başına bir şey ifade etmiyorsa React için de bu geçerli.
Ayrıca React Component’lerinin baş harfleri her zaman büyük olur (örn. LoginComponent, SelamComponent). Elementlerde bu durum söz konusu değildir.
Bir component state tutabilir, elementlerden oluşur, lifecycle’lara yani yaşam döngülerine sahiptir, o component ekrana mount edildiğinde (render edildiğinde) bir event çağrılır ve bundan haberimiz olur, ancak bir element için aynı şeyleri söyleyemeyiz.
Soru #6 —Prop drilling nedir?
Cevap: React içerisinde componentlere prop aracılığı ile bilgi göndermek isteyebiliriz. Ancak bu bilgiyi 3. veya 4. katmandaki component’e (child’a) göndermek istemeyiz.
Bunun sebebi, eğer 3. katmandaki componenti başka yerde kullanmak istersek aynı propları göndermek zorunda kalabiliriz.
Örnek 3 katmanlı prop drilling:
Gördüğünüz gibi C componentinden A componentine bir propu aktarmak için arada B componentinin prop’undan geçirdik. Bu durumu asla istemeyiz ve bu veriyi başka componente aktarmak için başka alternatifler kullanmalıyız. Burada B componentine boş yere prop göndermiş olduk. B componentini başka yerlerde kullanmak istersek prop gelmeyeceği için hatalarla karşılaşabiliriz.
Soru #7 — Spread syntax nedir?
Cevap: Spread syntax’ı 3 noktada kullanırız:
Peki ne işe yarar?: Birden fazla veriyi başka bir yere aktarmamızı sağlar. Mesela:
const a = [1, 2, 3]
Diyelim a diye bir Array’imiz var.
const b = […a, 4, 5]
b arrayının içerisinde …a yaparak şu çıktıyı elde ederiz:
console.log(b) // [1,2,3,4,5]
Yani a array’ının elemanlarını b’nin içerisinde dağıtmış olduk.
Obje içerisinde kullanımı da neredeyse aynı.
Ve aslında bu özellik çok iyi! Çünkü obje içerisindeki değerler override edilir. Örnek:
Peki function(…args) ne işe yarar? Bazen fonksiyonlara birden fazla parametre göndermek zorunda kalabiliriz. Ve bu parametrelerin sayısı belli değil ise …args şeklinde bir parametre belirleriz ve o fonksiyona gönderilen bütün parametreler args değişkeni içerisinde array şeklinde tutulur.
Soru #8— HOC (Higher Order Component) nedir?
HOC, aslında React’ın bir parçası değil ancak daha çok kullanım şeklidir. Eğer bir component döndürürken tekrar eden fonksiyonları beraberinde göndereceksek ve bu fonksiyonları tekrar tekrar yazmak istemiyorsak componenti başka bir component ile wraplayıp logicimizi bu component içerisine yazarak return edersek HOC yapmış oluruz.
Bunun diğer kullanımı ise with*** şeklinde dosyanın sonunda componentimizi wraplamak.
Örneğin dosyanın sonunda export ederken:
Burada önce withAuth içerisinde kullanıcı giriş yapıp yapmamış logic’i kurulur. Eğer yapılmışsa Login componenti gösterilmek yerine Router ile Home sayfasına redirect edebiliriz.
Soru #9 — Context nedir? ne zaman kullanılır?
Cevap: Context aslında global state management çözümlerinden birisidir.
Çalışma şekli şöyledir; Context, en üst seviyede (root) bir provider componenti ile bütün componentlerin üstünde bulunarak içerisindeki verileri useContext hook’u ile bütün componentlerde kullanmamızı sağlar.
Soru #10— React içerisinde Fragment ne işe yarar?
Cevap: Bazen React içerisinde bir componentten birden fazla componenti veya elementi döndürmek isteyebiliriz. Ve döndürürken bir parent’a sahip olmalarını istemiyorsak Fragment kullanabiliriz.
Gördüğünüz gibi return’den sonra iki tane div döndürdük. Peki doğru oldu mu?
Hayır olmadı. JSX orada sadece bir tane div olduğunu gördü ve diğer div’in ne işe yaradığını bulamadı. Peki bu iki divi nasıl döndürürüz? Burada React Fragment yardımımıza koşuyor. Yani parent component olmadan parent component(miş) gibi davranmasını sağlıyor.
Gördüğünüz gibi parent olarak <> </> koyunca hiç bir hata vermeden kodumuz çalışacaktır. Bunun bir diğer kullanımı React’ı import edip <React.Fragment> </React.Fragment> şeklindedir.
Soru #11 — Virtual DOM nedir?
Cevap: İlk önce, DOM nedir? Document Object Model, bir web sayfasının objeler şeklinde tutulmasına denir. Yani bir web sayfasında her gördüğünüz elementin browser tarafında object tanımı vardır. Framework ve library’lerin DOM ile iletişime geçmesi için iki yöntem vardır, birincisi JavaScript’ten alışık olduğumuz düz DOM manipulation. Element.innerHTML = “test” derken aslında o elemente direkt erişiyoruz. Gerçek DOM’a ne kadar erişmezsek, o kadar performanslı bir uygulama elde ederiz. DOM içerisinde, JS ile document.getElementById diyerek DOM API’ye erişiriz ve bu işlem performans kaybına neden olur.
İkinci yöntem olarak, VDOM’un amacı, ekrandaki DOM elementlerinin bir kopyasını JS içerisinde tutup, bu obje içerisindeki bir değişikliğe göre bu kopyayı ekrana render etmeye dayanır. Yani elementi DOM API’ye erişip değiştirmek yerine, VDOM içerisinde kopyasını değiştiririz. React, bu kopyadaki değişikleri algılayıp render eder. Buna Reconciliation denir.
Aslında React’ı jQuery’den ayıran en büyük kısım da budur.
