[REACT] 컴포넌트: UI 개발의 핵심 구성 요소

React 컴포넌트란 무엇인가?

React 컴포넌트는 UI를 구성하는 독립적인 블록으로, HTML, CSS, JavaScript를 하나의 단위로 묶어 관리합니다. 전통적인 웹 개발 방식에서는 HTML 태그를 반복 작성하거나 스타일을 일일이 적용해야 했지만, React에서는 컴포넌트를 통해 이러한 작업을 모듈화하고 재사용성을 극대화합니다. 예를 들어, 버튼, 카드, 내비게이션 바 같은 요소를 각각 컴포넌트로 정의해 필요할 때마다 호출할 수 있습니다.

컴포넌트 작성의 기본 원칙

• 함수형 컴포넌트: React 컴포넌트는 일반적인 JavaScript 함수입니다.
• 대문자 시작: 컴포넌트 이름은 HTML 태그와 구분하기 위해 반드시 대문자로 시작해야 합니다.
• JSX 사용: JSX는 JavaScript와 HTML을 결합한 문법으로, 컴포넌트가 UI를 선언적으로 표현하도록 돕습니다.
• 재사용성과 모듈성: 컴포넌트는 독립적이면서도 다른 컴포넌트와 조합할 수 있어야 합니다.

컴포넌트 만들기

개별 제품 정보 컴포넌트

function ProductItem({ title, price, imageUrl }) {
  return (
    <div className="product-item">
      <img src={imageUrl} alt={`${title} 이미지`} width="150" />
      <h4>{title}</h4>
      <p>{price.toLocaleString()}원</p>
    </div>
  );
}

개별 제품 정보 컴포넌트 사용하기

제품 데이터를 배열로 관리하여 개별 제품 정보 컴포넌트를 사용하여 각 제품마다 동적으로 생성하게 만듭니다. 별도 HTML 작업 없이 데이터만 업데이트하면 UI는 자동으로 반영됩니다.

export default function ProductCatalog() {
  const products = [
    { id: 1, title: "노트북", price: 1500000, imageUrl: "https://example.com/laptop.jpg" },
    { id: 2, title: "스마트폰", price: 900000, imageUrl: "https://example.com/phone.jpg" },
    { id: 3, title: "헤드폰", price: 250000, imageUrl: "https://example.com/headphones.jpg" },
  ];

  return (
    <div className="product-catalog">
      <h1>제품 카탈로그</h1>
      <div className="catalog-grid">
        {products.map((product) => (
          <ProductItem
            key={product.id}
            title={product.title}
            price={product.price}
            imageUrl={product.imageUrl}
          />
        ))}
      </div>
    </div>
  );
}

컴포넌트 작성 시 주의사항

모듈화와 내보내기

다른 파일에서 컴포넌트를 사용하려면 export default로 내보내고, 사용할 때는 import로 불러와야 합니다.

// 내보내기
export default ProductCatalog;

// 가져오기
import ProductCatalog from './ProductCatalog';

JSX 문법 준수

JSX가 여러 줄일 경우 반드시 괄호로 감싸야 하며, 단일 루트 요소를 반환해야 합니다.

return (
 <div>
   <h1>제목</h1>
   <p>내용</p>
 </div>
);

컴포넌트 이름 규칙

컴포넌트 이름이 소문자로 시작하면 React가 HTML 태그로 인식하므로, 반드시 대문자로 시작해야 합니다.

렌더링 최적화

컴포넌트 내부에서 또 다른 컴포넌트를 정의하면 불필요한 재렌더링이 발생할 수 있습니다.