효과적인 렌더링 관리 (useEffect) & 최하위 컴포넌트인지 알아보는법

효과적인 렌더링 관리 (useEffect): useEffect 훅을 사용하여 컴포넌트가 처음 렌더링될 때 한 번만 실행되도록 설정되어 있습니다.

 

 

상품 목록을 나타내는 src/component/organisms/ProductGrid.jsx

 

import ProductCard from "../molecules/ProductCard";
import React, { useState, useEffect} from 'react';
import axios from 'axios';
// import fImage from "../../img/images/1.jpg";
import '../../../src/styles/organisms/ProductGrid.css'
// import Loding from "../component/atoms/Loader";

/**
 * @param {object} productsData - products
 */
const ProductGrid = ({ productsData }) => {
  const [products, setProducts] = useState([]);


  useEffect(() => {
    setProducts(productsData.data.response);
  }, []);




  return (
    <div className="product-grid">
      
      { 
        products? products.map((product) => (
        <ProductCard key={product.id} product={product} />
        
      )): null}
      
    </div>
  );
};

export default ProductGrid;

 

 

최하위요소: 

 

그니까 부모요소로부터 props를 가져오는거 아닌데 이 전체 로직에서 또 props를 안 넘기잖아 그러면 제일 자식 요소라는거지?

네, 맞습니다. ProductCard 컴포넌트에서 별도로 다른 자식 컴포넌트를 포함하거나 그에 따른 props를 전달하지 않고, styled-components로 스타일링된 요소들을 직접 사용하면서 외부에서 전달받은 props만 사용한다면, 해당 ProductCard 컴포넌트가 최하위(가장 작은) 요소라고 볼 수 있습니다.

즉, 이 컴포넌트는 외부에서 주어진 props를 사용하여 스타일링된 구조를 렌더링하는 역할을 수행하고, 그 안에서 더 내부에 있는 자식 컴포넌트를 렌더링하거나 그에 따른 props를 관리하지 않습니다. 따라서 해당 코드에서 ProductCard는 최하위 요소로 간주할 수 있습니다.