Memahami Komponen Presentational dan Container pada React

Pada postingan blog ini kita akan mengekplorasi tentang React component. Ini menjelaskan dua jenis komponen - Presentational dan Container, karena keduanya bisa lebih dipahami sebagai pasangan.

Sebelum kita mulai mengekplorasi lebih jauh, kita perlu memahami dua hal:

1. Dua tipe ini tidak meng-extend class dasar dari React.Component. Tidak ada tipe seperti Presentational atau Container. Ini lebih seperti konvensi atau pattern/pola. Dimana para developer biasanya menggunakan ketika membuat sebuah aplikasi dengan React.

2. Pasangan ini juga bisa disebut sebagai stateless dan statefull atau impure dan pure component, tapi ini tidak sama. Presentational component dapat menjadi statefull, dan Container component dapat menjadi stateless juga, dan mereka juga dapat menjadi functional component atau class component.

Pengenalan dan Gambaran

Seperti yang sudah disebutkan diatas, devisi untuk Presentational component dan Container component adalah development pattern, biasanya digunakan oleh developer untuk membedakan komponen berdasarkan tujuannya:

• Presentational component mengatur bagaimana sesuatu terlihat.

• Container component mengatur bagaimana sesuatu berkerja.

Fitur Utama dari Presentational Component

• Fungsi utamanya adalah untuk menampilkan data.

• Biasanya hanya berisi method render() atau hanya JSX.

• Memiliki style.

• Tidak memiliki state (Ketika memiliki, itu bisanya state UI bukan data).

• Tidak tahu bagaimana cara merubah data.

• Menerima data melalui props dari Container component.

• Biasanya ditulis sebagai stateless functional component (Meskipun ini bukan aturan)

Contoh

const Book = ({ title, img_url }) => (
  <div className="book">
    <img src={img_url} alt={title}/>
    <h3>{title}</h3>
  </div>
)
export default Book;

Contoh diatas hanya memiliki satu tugas yang harus dilakukan yaitu me-render props yang diterima yaitu title dan img_url kedalam DOM.

Contoh berikut juga merupakan contoh dari Presentational component karena apa yang sebenarnya dilakukan adalah menentukan cara menampilkan daftar komponen dan mengirim data melalui props ke child component.

const BookList = ({ books }) => (
  <div className="book-list">
    { books.map(book => <Book title={book.title} img_url={book.img_url} />) }
  </div>
)
export default BookList;

Presentational component mendapatkan data dari Container component, dan jika kita lihat relasinya, itu adalah relasi child-parent, dimana Presentational component sebagai child dan Container component hampir disetiap kasus merupaka parent dari Presentational component.

Fitur Utama dari Container Component

• Fungsi utamanya adalah mengatur prilaku data.

• Berisi lebih banyak element/komponen dengan fungsi render() (Presentational component, lifecycle methods atau hooks)

• Tidak memiliki style.

• Memiliki state dan mengaturnya.

• Memberikan data ke children component.

• Selalu ditulis sebagai statefull class component (walaupun saat ini cenderung ditulis menggunakan hooks, jadi paling sering ditulis sebagai functional statefull component)

Contoh (class component)

import BookList from './BookList'
class BookList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            books: []
        };
    }

    componentDidMount() {
        fetch('https://learn-co-curriculum.github.io/books-json-example-api/books.json')
        .then(response => response.json())
        .then(bookData => this.setState({ books: bookData.books }))
    }

   render() {
        return <BookList books={this.state.books} />
    }
}
export default BookListContainer;

Contoh (funtional component)

import BookList from './BookList';
import {useState, useEffect} from 'react';

const BookList = () => {
    const [books, setBooks] = useState([]);
    useEffect(() => {
        fetch('https://learn-co-curriculum.github.io/books-json-example-api/books.json')
        .then(response => response.json())
        .then(bookData => setBooks({bookData.books}) }, []);
    }

    render() {
        return <BookList books={books} />
    }
}

export default BookListContainer;

Kesimpulan

2 jenis komponen ini selalu berjalan bersamaan karena memiliki pola yang sama. Karena React terus berkembang, dimungkinkan untuk menulis aplikasi React HANYA menggunakan fungsional component dan hook, karena mereka dapat menyelesaikan sebagian besar masalah sekarang. Pemisahan masalah antara Presentational dan logika adalah cara yang baik untuk lebih memahami bagaimana aplikasi kita harus bekerja dan UI apa yang akan dimilikinya. Tetapi pola ini BUKANLAH suatu keharusan dan kamu dapat menggunakannya jika menurut kamu wajar untuk aplikasi kamu.

Sumber

• dev.to/olenadrugalya/presentational-and-con..

• reactjs.org