// === Reminder ===
All tags must return under a parent tag or using a react fragment(>)

// === Reminder ===
React component name must start with a capital letter otherwise it won't treated as a component

ProductCard 구성 요소는 h1,h2,p가 포함된 div 태그 또는 HTML처럼 작성된 기타 필수 태그를 반환하지만 내부적으로는 Javascript입니다. 구문을 JSX(javascript XML)이라고 합니다. 걱정하지 마세요. 나중에 설명하겠습니다.

// === Reminder ===
JSX is a syntax extension for javascript that lets you write HTML-like markup inside a javascript file which handles the logic of rendering and markup live together in the same place as components.

이제 구성요소를 사용할 준비가 되었습니다. 예를 들어, 제품 페이지가 있고 일부 제품을 렌더링해야 합니다.

//Products.js or jsx file
function ProductCard(){
  return(
      

        
title of the product
        
price of the product
        
description of the product
        // rest of info
      
  )
}

function ProductPage(){
  return(
      
product page
        
  )
}

브라우저가 ProductCard를 3번 렌더링한다는 것은 3개의 제품 카드가 브라우저에 표시된다는 의미입니다.

요점은 이 ProductPage 코드를 얻은 후 브라우저가 어떻게 반응할 것인가입니다.

• 은 소문자이므로 React는 HTML 태그
로 참조된다는 것을 알고 있습니다.
• 는 대문자 P로 시작하므로 React는 그것이 컴포넌트로 처리될 것임을 알고 있습니다.

지금까지는 그렇게 좋았나요?. 성공적으로 제품 카드를 제품 페이지에 렌더링했습니다.
이제 코드를 정리할 차례입니다:
ProductCard, ProductReviewCard, 유사한ProductCard 등과 같은 구성 요소가 하나 이상 있을 수 있으므로 모든 구성 요소를 하나의 파일에 선언하고 관리하는 것이 번거로울 수 있습니다. 그럼 파일 구조만으로 관리할 수 있도록 좀 더 체계적으로 만들어 보겠습니다.
ProductCard가 여러 페이지에서 사용되었을 수 있으므로 재사용 가능한 폴더를 만들어 보겠습니다. 재사용 가능한 폴더 안에 ProductCard.js/jsx 파일을 만듭니다.

//reusable/ProductCard.js or jsx file
function ProductCard(){
  return(
      

        
title of the product
        
price of the product
        
description of the product
        // rest of info
      
  )
}

이제 ProductCard 구성 요소를 ProductPage 파일에서 어떻게 사용할 것인지 분리하는 것이 중요합니다. 이미 이해하셨을 수도 있다는 점을 알고 있습니다. ProductCardfile에서 ProductCard 함수를 귀하가 실제로 선호하는 이름 또는 기본값으로 내보낼 수 있습니다.

//reusable/ProductCard.js or jsx file
export default function ProductCard(){
  return(
      

        
title of the product
        
price of the product
        
description of the product
        // rest of info
      
  )
}

이제 ProductPage 파일에서 사용할 수 있습니다. ProductPage 파일에서 ProductCard를 가져온 다음 원하는 만큼 사용하세요.

//ProductPage.js or jsx file
import ProducrCard from './reusable/ProductCard.js'
function ProductPage(){
  return(
      
product page
        
  )
}

앞서 재사용성, 관심 분리, 모듈성을 위해 컴포넌트를 사용해야 하는 이유를 언급했습니다.

• 이제 ProductCard 구성 요소를 완전히 재사용할 수 있습니다. 어디에서나 사용할 수 있습니다.
• ProductPage에는 ProductCard,ProductReviewCard,SimilarProductCard,RecommendedProductCard 등과 같은 여러 섹션이 있을 수 있습니다. 구성 요소별로, 섹션별로 별도의 섹션에 초점을 맞춰 코드를 관리하고 유지 관리합니다.
• UI를 작은 섹션 단위로 분할하면 테스트, 디버깅 및 개발이 더 쉬워집니다. 버그가 발생하면 특정 구성 요소에서 버그/문제를 쉽게 찾을 수 있습니다. 이제 훨씬 더 명확해지기를 바라나요?

이 모든 과정을 거쳐 구성 요소를 중첩할 수도 있다는 것을 이해하게 되었습니다.

그럼 다시 살펴볼까요-?
레이아웃 폴더 생성
Layout 폴더 아래에 Header 폴더를 만든 다음 Header 폴더 안에 index.js 파일을 만듭니다.

export default function Header(){
  return(
      
Header
      
  )
}

create `Footer` folder under the `Layout` folder then create `index.js` file inside `Footer` folder
export default function Footer(){
  return(
      
Footer
      
  )
}

이제 레이아웃 폴더 아래에 index.js 파일이 생성됩니다.

import Header from './Header';
import Footer from './Footer';
export default function Layout(){
  return(
      
page content
        
  )
}

당신이 이미 React 컴포넌트 아키텍처의 아름다움을 발견하셨기를 바랍니다. 이것은 이제 막 시작되었으며 여러분의 마음 속에 관심을 키우려고 노력했습니다.
즐거운 코딩 되셨나요??