컴포넌트 기반 아키텍처의 주요 특징

React JS에서 구현되는 컴포넌트 기반 아키텍처의 5가지 주요 특징은 다음과 같습니다. 이 예제는 React 구성 요소가

의 특성을 어떻게 구현하는지 보여줍니다.

1. 재사용성
2. 캡슐화, 호환성
3. 확장성
4. 유지관리성
5. 구성

재사용성
구성 요소는 애플리케이션의 여러 부분에서 재사용될 수 있습니다.
예: 여러 번 사용되는 Button 구성 요소

function Button({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>;
}

function App() {
  return (
    <div>
      <Button label="Submit" onClick={() => alert('Submit clicked')} />
      <Button label="Cancel" onClick={() => alert('Cancel clicked')} />
    </div>
  );
}

캡슐화
구성 요소는 논리와 스타일을 캡슐화하여 외부 간섭을 방지합니다.
예: 사용자 데이터를 캡슐화하는 UserProfile 구성 요소

function UserProfile({ name, email }) {
  return (
    <div>
      <h3>{name}</h3>
      <p>Email: {email}</p>
    </div>
  );
}

function App() {
  return (
    <UserProfile name="John Doe" email="john@example.com" />
  );
}

호환성
앱의 전반적인 기능에 영향을 주지 않고 구성 요소를 교체하거나 교체할 수 있습니다.
예: PrimaryButton을 SecondaryButton으로 교체

function PrimaryButton({ label, onClick }) {
  return <button style={{ backgroundColor: 'blue', color: 'white' }} onClick={onClick}>{label}</button>;
}

function SecondaryButton({ label, onClick }) {
  return <button style={{ backgroundColor: 'gray', color: 'white' }} onClick={onClick}>{label}</button>;
}

function App({ usePrimary }) {
  return (
    <div>
      {usePrimary ? <PrimaryButton label="Click Me" onClick={() => alert('Primary clicked')} /> : 
                   <SecondaryButton label="Click Me" onClick={() => alert('Secondary clicked')} />}
    </div>
  );
}

확장성
구성 요소를 사용하면 기존 구성 요소에 영향을 주지 않고 더 많은 기능을 추가하여 쉽게 확장할 수 있습니다.
예: 앱 확장을 위해 더 많은 제품 구성요소 추가

function Product({ name, price }) {
  return (
    <div>
      <h3>{name}</h3>
      <p>Price: ${price}</p>
    </div>
  );
}

function ProductList() {
  const products = [
    { name: 'iPhone 13', price: 999 },
    { name: 'Samsung Galaxy S21', price: 799 },
    { name: 'Google Pixel 6', price: 599 },
  ];

  return (
    <div>
      {products.map((product, index) => (
        <Product key={index} name={product.name} price={product.price} />
      ))}
    </div>
  );
}

function App() {
  return <ProductList />;
}

유지관리성
구성 요소가 분리되어 있어 독립적으로 쉽게 유지 관리하고 업데이트할 수 있습니다.
예: 앱의 나머지 부분에 영향을 주지 않고 제품 구성 요소 업데이트

function Product({ name, price }) {
  // Add a new feature to show if the product is on sale
  const isOnSale = price < 700;
  return (
    <div>
      <h3>{name}</h3>
      <p>Price: ${price} {isOnSale && <span>(On Sale!)</span>}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <Product name="Google Pixel 6" price={599} />
    </div>
  );
}

구성
구성요소를 결합하거나 구성하여 더욱 복잡한 UI를 구축할 수 있습니다.
예: 머리글, 제품, 바닥글을 하나의 페이지로 구성

function Header() {
  return <h1>Welcome to My Shop</h1>;
}

function Product({ name, price }) {
  return (
    <div>
      <h3>{name}</h3>
      <p>Price: ${price}</p>
    </div>
  );
}

function Footer() {
  return <footer>Contact us at shop@example.com</footer>;
}

function Page() {
  return (
    <div>
      <Header />
      <Product name="Apple Watch" price={399} />
      <Footer />
    </div>
  );
}

function App() {
  return <Page />;
}

위 내용은 컴포넌트 기반 아키텍처의 주요 특징의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!