React'da Props ve Component ile Props İlişkisi Nedir?

Component Nedir?

Component dışarıdan aldığı "props" ya da herhangi bir veri almadan geriye HTML çıktısı dönen ve tekrarlı şekilde kullanılabilen bir fonksiyondur. React, oluşturulan component i kullanıldığı her bir yer için eşsiz bir id vererek tekrar kullanılabilse bile karışmalarını önler. İstenilirse farklı dosyalar içinde istenilerse aynı dosya içinde bile tekrarlı kullanılabilir. Bu durum karışıklık meydana getirmez.

Props Nedir?

Component için değer alabildiğini ya da değer almadan kullanılabildiğinden bahsettik. Eğer component değer almıyorsa bu component tek bir işlemi her seferinde aynı şekilde döndürme üzerine kurulu olduğu anlamına gelir. Component değer alıyorsa render ettiği yapıda her kullanım için farklı sonuçlar dönebilir. Bu durum bir fonksiyonun farklı parametre alması ve her seferinde gelen değere göre sonuç üretmesi ile aynı durumdur. Bu değer diye ifade ettiğimiz aslında props'tur. Props bir component'in değer alma mekanizmasını ifade etme biçimidir.

Component'de Props Kullanma Yöntemleri

1.Destructuring Etmeden Kullanma

Bu şekilde gelen tüm veriler bir obje yapısı içinde doğrudan alınması sağlar. Bu şekilde props objesi içinden değer çağrılabilir.

import {useState} from "react"

// Component Örneği

function BlogCard(props) {
  return (
    <div className="blog-container">
      <div className="blog-image">
        <img src={props.image} alt={props.title} />
      </div>
      <div className="blog-content">
        <span className="blog-title">{props.title}</span>
        <span className="blog-description">{props.description}</span>
      </div>
      <div className="blog-footer">
        <span className="blog-date">{props.date}</span>
        <span className="blog-author">{props.author}</span>
      </div>
    </div>
  )
}

// Component Kullanım şekli
function BlogList() {

  const [blogs, setBlogs] = useState([])

  return (
    <div className="blog-list-container">
      {blogs.map((blog) => (
        <BlogCard key={blog.id} image={blog.image} title={blog.title} description={blog.description} date={blog.date} author={blog.author} />
      ))}
    </div>
  )
}
jsx

2.Destructuring Yaparak Kullanma

Bu kullanım şeklinde props içindeki değerler iki şekilde destructuring edilebilir. İstenilirse doğrudan props nesne üzerinden ya da doğrudan fonksiyonun parametresi üzerinden destructuring edilebilir.

Props Objesi Üzerinden

import {useState} from "react"

// Component Örneği

function BlogCard(props) {

  const {image, title, description, date, author} = props
  
  return (
    <div className="blog-container">
      <div className="blog-image">
        <img src={image} alt={title} />
      </div>
      <div className="blog-content">
        <span className="blog-title">{title}</span>
        <span className="blog-description">{description}</span>
      </div>
      <div className="blog-footer">
        <span className="blog-date">{date}</span>
        <span className="blog-author">{author}</span>
      </div>
    </div>
  )
}

// Component Kullanım şekli
function BlogList() {

  const [blogs, setBlogs] = useState([])

  return (
    <div className="blog-list-container">
      {blogs.map((blog) => (
        <BlogCard key={blog.id} image={blog.image} title={blog.title} description={blog.description} date={blog.date} author={blog.author} />
      ))}
    </div>
  )
}
jsx

Paremetre Üzerinden

import {useState} from "react"

// Component Örneği

function BlogCard({image, title, description, date, author}) {
  return (
    <div className="blog-container">
      <div className="blog-image">
        <img src={image} alt={title} />
      </div>
      <div className="blog-content">
        <span className="blog-title">{title}</span>
        <span className="blog-description">{description}</span>
      </div>
      <div className="blog-footer">
        <span className="blog-date">{date}</span>
        <span className="blog-author">{author}</span>
      </div>
    </div>
  )
}

// Component Kullanım şekli
function BlogList() {

  const [blogs, setBlogs] = useState([])

  return (
    <div className="blog-list-container">
      {blogs.map((blog) => (
        <BlogCard key={blog.id} image={blog.image} title={blog.title} description={blog.description} date={blog.date} author={blog.author} />
      ))}
    </div>
  )
}
jsx

Her iki durumda da props objesi içinden verilerin okunması sağlanır. Kullanılan yöntemlerin hiçbirinin birbirinden bir üstünlüğü yoktur ancak topluluk standardı olarak parametre üzerinden destructuring edilmesi tavsiye edilir.

Props Olarak Neler Gönderebiliriz?

Props olarak string, number, boolean, array ve object yapıları ve bunların yanı sıra fonksiyon da gönderebiliriz. Yani bunun anlamı parent yapıda olup child tarafında tetiklenme istenilen bir durumu gerçekleştirebiliriz. En genel kullanım senaryonlarından biri state yapısının değişimi child component de yapılacaksa eğer set değerini göndermektir. Bu şekilde parent yapıda olan state child component de değiştirilebilir hata bu değişim izlenebilir.

import {useState} from "react"

function BlogCard({image, title, description, date, author, setClickedBlog}) {
  return (
    <div className="blog-container">
      <div className="blog-image">
        <img src={image} alt={title} />
      </div>
      <div className="blog-content">
        <span className="blog-title">{title}</span>
        <span className="blog-description">{description}</span>
      </div>
      <div className="blog-footer">
        <span className="blog-date">{date}</span>
        <span className="blog-author">{author}</span>
        <button className="blog-read-more" onClick={() => setClickedBlog(true)}>Oku Daha Fazla</button>
      </div>
    </div>
  )
}

function BlogList() {

  const [blogs, setBlogs] = useState([])
  const [clickedBlog, setClickedBlog] = useState(false)

  return (
    <div className="blog-list-container">
      {blogs.map((blog) => (
        <BlogCard key={blog.id} image={blog.image} title={blog.title} description={blog.description} date={blog.date} author={blog.author} setClickedBlog={setClickedBlog} />
      ))}
    </div>
  )
}
jsx

Parent component den child componente fonksiyon gönderildiğinde özellikle state in set yapısı child tarafında tetiklendiğinde parent component de tetiklenecek ve yeniden render edilecektir. Bu durumun tasarımınızı yaparken göz önünde bulundurulması önemlidir.

Props ve Typescript İlişkisi

Props değerleri bizim componentimizde hayati değerlere sahip parametreleri içeriyor olabilir. Bunun gönderilmemesi ya da yanlış tip değeri gönderilmesi bazı senaryolarda fark edilmesi zor durumlara dönüşebiliyor. Bu senaryolarda componentin güvenle çalışabilmesi doğru veri tiplerinin alınması ile mümkün oluyor. Bu konuda sahneyi Typescript alıyor. Typescript güçlü tip doğrulama mekanizması ve Ecmascript ile hataların yönetilmesi konusunda bizi çıkmaza girmeden kurtarıyor. Gönderilen doğru ve istekli "zorunlu ya da opsiyonel" veri ile component kullanımında kullanıcısını yönlendiriyor. Örnek bir senaryo üzerinden bakalım.

type BlogCardProps = {
  image: string;
  title: string;
  description: string;
  date: string;
  author: string;
  setClickedBlog: React.Dispatch<React.SetStateAction<boolean>>; // State action yapısının türünü zorunlu olarak belirtiyoruz.
} 


function BlogCard({image, title, description, date, author, setClickedBlog}: BlogCardProps) {
  return (
    <div className="blog-container">
      <div className="blog-image">
        <img src={image} alt={title} />
      </div>
      <div className="blog-content">
        <span className="blog-title">{title}</span>
        <span className="blog-description">{description}</span>
      </div>
      <div className="blog-footer">
        <span className="blog-date">{date}</span>
        <span className="blog-author">{author}</span>
        <button className="blog-read-more" onClick={() => setClickedBlog(true)}>Oku Daha Fazla</button>
      </div>
    </div>
  )
}
tsx

import {useState} from "react"

function BlogList() {

  const [blogs, setBlogs] = useState([
    {
      id: 1,
      image: "https://via.placeholder.com/150",
      title: "Blog 1",
      description: "Blog 1 description",
      date: "2021-01-01",
      author: "John Doe"
    },
    {
      id: 2,
      image: "https://via.placeholder.com/150",
      title: "Blog 2",
      description: "Blog 2 description",
      date: "2021-01-02",
      author: "Jane Doe"
    },
    {
      id: 3,
      image: "https://via.placeholder.com/150",
      title: "Blog 3",
      description: "Blog 3 description",
      date: "2021-01-03",
      author: "John Doe"
    }
  ])
  const [clickedBlog, setClickedBlog] = useState<boolean>(false)

  return (
    <div className="blog-list-container">
      {blogs.map((blog) => (
        <BlogCard key={blog.id} image={blog.image} title={blog.title} description={blog.description} date={blog.date} author={blog.author} setClickedBlog={setClickedBlog} />
      ))}
    </div>
  )
}
tsx

Bu senaryoda map edilen blog listesinin değerlerini alan BlogCard componenti type kontrolü ile en doğru verinin alınmasını sağlayacaktır.

Componentin kabul ettiği props parametrelerini zorunlu ya da opsiyonel olarak tanımlayarak ihtiyaç dahilinde kullanılmasını sağlayabiliriz.

type BlogCardProps = {
  image: string;
  title: string;
  description: string;
  date: string;
  author: string;
  setClickedBlog?: React.Dispatch<React.SetStateAction<boolean>>; // Bu değer zorunlu değildir
} 


function BlogCard({image, title, description, date, author, setClickedBlog}: BlogCardProps) {
  return (
    <div className="blog-container">
      <div className="blog-image">
        <img src={image} alt={title} />
      </div>
      <div className="blog-content">
        <span className="blog-title">{title}</span>
        <span className="blog-description">{description}</span>
      </div>
      <div className="blog-footer">
        <span className="blog-date">{date}</span>
        <span className="blog-author">{author}</span>
        <button className="blog-read-more" onClick={() => setClickedBlog?.(true)}>Oku Daha Fazla</button>
      </div>
    </div>
  )
}
tsx

import {useState} from "react"

const BlogConstantList = [
    {
      id: 1,
      image: "https://via.placeholder.com/150",
      title: "Blog 1",
      description: "Blog 1 description",
      date: "2021-01-01",
      author: "John Doe"
    },
    {
      id: 2,
      image: "https://via.placeholder.com/150",
      title: "Blog 2",
      description: "Blog 2 description",
      date: "2021-01-02",
      author: "Jane Doe"
    },
    {
      id: 3,
      image: "https://via.placeholder.com/150",
      title: "Blog 3",
      description: "Blog 3 description",
      date: "2021-01-03",
      author: "John Doe"
    }
  ]


function BlogList() {

  const [blogs, setBlogs] = useState(BlogConstantList)
  const [clickedBlog, setClickedBlog] = useState<boolean>(false)

  return (
    <div className="blog-list-container">
      {blogs.map((blog) => (
        <BlogCard key={blog.id} image={blog.image} title={blog.title} description={blog.description} date={blog.date} author={blog.author} />
      ))}
    </div>
  )
}
tsx

Props ile Yapılmaması Gerekenler

1. Bir component her zaman sadece bir görevi yerine getirmesi gerekir. Bundan ötürü props ile componentin yapısı farklı yönlere evirecek değerler gönderilmemelidir.
2. Bir component çok fazla parametreye sahipse her parametre değerini ayrı ayrı göndermek okunaklığı azaltacağından ayrı ayrı gönderilmemelidir. Bunun yerine bir obje haline çevrilmeli ve gönderilmelidir.

Konuyla ilgili sorularınız varsa bana iletişim sayfası üzerinden ulabilirsiniz.