Component (컴포넌트)

 

🟡 Component

React는 사용자 인터페이스(UI)를 독립적이고 재사용 가능한 단위인 컴포넌트로 나누어 개발하며, 이를 조합하여 하나의 화면을 구성한다. 각 컴포넌트는 자체 UI와 기능을 가지며 다른 컴포넌트와 독립적으로 동작한다.

 

◼️ 주요 특징

• UI 구성: 화면의 특정 영역을 담당하여 시각적 요소를 형성한다.
• 재사용성: 동일한 코드를 여러 위치에서 재사용할 수 있어 중복을 줄인다.
• 유지보수성: 기능별로 코드가 분리되어 있어 수정과 관리가 용이하다.
• 독립성: 각 컴포넌트가 독립적으로 작동하므로 변경 사항이 다른 영역에 미치는 영향을 최소화한다.

 

◼️ 컴포넌트의 종류

 🔹 함수형 컴포넌트 (Functional Component)

• JavaScript 함수로 작성하는 컴포넌트이다.
• React Hooks를 지원함에 따라 상태(State) 관리와 생명주기(Lifecycle) 기능을 모두 구현할 수 있어, 현재 React의 표준 작성 방식이다.

 

🔹 클래스형 컴포넌트 (Class Component)

• JavaScript 클래스 문법으로 작성하며 React.Component를 상속받는다.
• 과거 상태 관리와 생명주기 메서드를 사용하기 위해 쓰였으나, Hooks 등장 이후 현재는 대부분 함수형 컴포넌트로 대체되었다.

 

◼️ 명명 규칙

React 컴포넌트의 이름은 반드시 대문자로 시작해야 한다. (PascalCase)

// HTML DOM 태그로 인식
const element1 = <div />;

// React 컴포넌트로 인식
const element2 = <Welcome name="리액트" />; // Welcome은 대문자로 시작

• 소문자로 시작하는 태그는 표준 HTML 태그(div, span 등)로 인식한다.
• 대문자로 시작하는 태그만 사용자 정의 컴포넌트로 인식한다.

 

◼️ 컴포넌트와 Props

Props(Properties)는 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 사용하는 수단이다.

Props를 활용하면 동일한 컴포넌트 구조 내에서 전달받는 데이터에 따라 서로 다른 내용을 출력할 수 있다.

<Button text="확인" />
<Button text="취소" />
<Button text="저장" />

• 전달받는 text 값에 따라 각기 다른 버튼을 출력한다.

 

◼️ 컴포넌트 조합(Composition)

여러 개의 작은 컴포넌트를 결합하여 하나의 큰 화면을 구성하는 방식을 컴포넌트 조합이라고 한다.

App
 ├── Navbar
 │    └── NavLink
 ├── Heading
 ├── Card
 │    ├── Heading
 │    └── Button
 └── Image

• 작은 단위의 컴포넌트를 조합하여 구조를 계층화하면 전체적인 코드의 가독성과 재사용성이 높아진다.

 

 

📍  POINT 📍 

✔️ UI를 독립적이고 재사용 가능한 단위로 분리하여 개발 효율성을 극대화한다. ✔️

✔️ 컴포넌트 기반 설계를 바탕으로 Props 데이터를 활용하고 적절히 조합(Composition)하는 것이 React 애플리케이션 개발의 기본 구조이다. ✔️

 

 

---

 

⚙️ 실전 예제 코드 ⚙️

💡 중요 요점: 배열 렌더링 시 key 설정 map() 함수를 통해 컴포넌트를 반복 생성할 때는 고유한 key 속성을 지정해야 한다.

React가 변경된 요소를 정확하게 식별하고 가상 DOM을 효율적으로 렌더링하는 데 필요하다.

import React from 'react';

// 1. 기본 버튼 컴포넌트
function Button(props) {
  return <button className="custom-button">{props.text}</button>;
}

// 2. 제목 컴포넌트
function Heading(props) {
  return <h1 className="title">{props.title}</h1>;
}

// 3. 카드 컴포넌트 (Heading, Button 조합)
function Card(props) {
  return (
    <div className="card">
      <Heading title={props.title} />
      <p className="card-content">{props.content}</p>
      <Button text={props.buttonText} />
    </div>
  );
}

// 4. 이미지 컴포넌트
function Image(props) {
  return <img src={props.src} alt={props.alt} className="custom-image" />;
}

// 5. 네비게이션 링크 컴포넌트
function NavLink(props) {
  return <a href={props.url} className="nav-link">{props.text}</a>;
}

// 6. 네비게이션 바 컴포넌트
function Navbar(props) {
  return (
    <nav className="navbar">
      <ul>
        {/* 배열을 렌더링할 때는 고유한 key 속성이 필요합니다 */}
        {props.links.map((link, index) => (
          <li key={index}>
            <NavLink url={link.url} text={link.text} />
          </li>
        ))}
      </ul>
    </nav>
  );
}

// 7. App 컴포넌트 (최상위 조합)
function App() {
  const navLinks = [
    { url: "/home", text: "홈" },
    { url: "/about", text: "소개" },
    { url: "/contact", text: "연락처" }
  ];

  return (
    <div className="app">
      <Navbar links={navLinks} />
      
      <div className="main-content">
        <Heading title="React 컴포넌트 예제" />
        
        <Card 
          title="첫 번째 카드" 
          content="이것은 React 컴포넌트로 만든 카드입니다." 
          buttonText="자세히 보기" 
        />
        
        <Card 
          title="두 번째 카드" 
          content="컴포넌트를 재사용하면 코드를 효율적으로 관리할 수 있습니다." 
          buttonText="확인하기" 
        />
        
        <Image 
          src="https://example.com/image.jpg" 
          alt="예시 이미지" 
        />
      </div>
    </div>
  );
}

export default App;