React Handling Events ve Conditional Rendering

Olay İşleyicisi Tanımlama:

JSX içinde olay işleyicilerini tanımlamak için genellikle camelCase olarak adlandırılmış özel bir olay özelliği kullanılır. Örneğin, bir tıklama olayı için onClick, bir değişim olayı için onChange.

<button onClick={handleClick}>Click me</button>

Olay İşleyicisinin Tanımlanması:

Olayı işleyecek bir fonksiyonu tanımlayın. Bu fonksiyon, genellikle bir sınıf içinde veya bir fonksiyonel bileşen içinde yer alır.

function handleClick() { console.log('Button clicked!'); }

Fonksiyonunuzu sınıf içinde kullanmak istiyorsanız:

class MyComponent extends React.Component { handleClick() { console.log('Button clicked!'); } render() { return <button onClick={this.handleClick}>Click me</button>; } }

Olay İşleyicisini Parametre ile Kullanma:

Bazı durumlarda, olay işleyicinizin tetiklendiği olay hakkında daha fazla bilgi almak isteyebilirsiniz. Bu durumda, olay işleyicinize bir parametre ekleyebilirsiniz.

function handleInputChange(event) { console.log('Input changed:', event.target.value); }

Olay İşleyicisinin Kaldırılması:

Component, belirli bir durumda veya ömrünün bir noktasında olayı dinlemek istemiyorsa, olay işleyicisini kaldırmak önemlidir. Bu, özellikle sınıf bileşenlerinde componentWillUnmount gibi özel yöntemlerle yapılabilir.

componentWillUnmount() { window.removeEventListener('resize', this.handleResize); }

Fonksiyonel bileşenlerde, useEffect kullanarak olay dinleme işlemlerini temizleyebilirsiniz.

useEffect(() => { const handleClick = () => { console.log('Button clicked!'); }; window.addEventListener('click', handleClick); return () => { window.removeEventListener('click', handleClick); }; }, []); // Boş bağımlılık dizisi, bileşen unmount olduğunda temizleme işlemini gerçekleştirir.

React, olay işleme konusunda oldukça esnek bir yaklaşım sunar ve bu temel adımlar, çeşitli olayları işlemenin başlangıç noktasıdır.

Conditional Rendering

React'ta koşullu render etme, bir bileşenin belirli bir duruma veya koşula bağlı olarak farklı içeriği veya yapıyı render etmesini ifade eder. Bu, kullanıcı girişi, bileşen durumu veya başka bir koşulun sonucuna bağlı olarak farklı içeriği görüntüleme ihtiyacını karşılamak için sıkça kullanılır.

İşte React'ta koşullu render etmenin birkaç yolu:

1. If-Else İfadeleri:

class MyComponent extends React.Component { render() { if (this.props.isLoggedIn) { return <UserDashboard />; } else { return <Login />; } } }

2. Üçlü Operatör:

class MyComponent extends React.Component { render() { return ( <div> {this.props.isLoggedIn ? <UserDashboard /> : <Login />} </div> ); } }

3. Logical && Operatörü:

class MyComponent extends React.Component { render() { return ( <div> {this.props.isLoggedIn && <UserDashboard />} </div> ); } }

4. Koşullu İfadeleri Fonksiyonlarda Kullanma:

function MyComponent({ isLoggedIn }) { const renderContent = () => { if (isLoggedIn) { return <UserDashboard />; } else { return <Login />; } }; return <div>{renderContent()}</div>; }

5. Koşullu Render için Dıştan Yardım Almak (Helper Fonksiyonlar):

function MyComponent({ isLoggedIn }) { const renderContent = (isLoggedIn) => { if (isLoggedIn) { return <UserDashboard />; } else { return <Login />; } }; return <div>{renderContent(isLoggedIn)}</div>; }

Bu örneklerde, isLoggedIn adlı bir prop veya durum değişkenine bağlı olarak farklı bileşenleri render etme örnekleri bulunmaktadır. Kullanılan yöntem, projenizin gereksinimlerine ve kişisel tercihlerinize bağlı olarak değişebilir.