React.js component - 리액트 컴포넌트

React Component

---

React를 배우면서 가장 먼저 만나게 되는 중요한 개념이 바로 **컴포넌트(Component)**입니다.

React는 웹 애플리케이션의 사용자 인터페이스(UI)를 만들 때 이 컴포넌트들을 조립해서 사용합니다.

---

---

컴포넌트의 정의

---

컴포넌트는 UI를 구성하는 독립적이고 재사용 가능한 부품입니다. 
마치 레고 블록처럼, 작은 컴포넌트들을 모아서 더 크고 복잡한 UI를 만들 수 있습니다. 

각 컴포넌트는 자체적인 기능과 모양을 가지며, 다른 컴포넌트들과 독립적으로 동작할 수 있습니다.

---

---

컴포넌트의 역할

---

컴포넌트는 다음과 같은 역할을 합니다.

UI 구성: 

웹 페이지의 특정 부분을 담당하여 화면에 표시될 내용을 정의합니다.

재사용성:

한 번 만든 컴포넌트는 여러 곳에서 반복적으로 사용할 수 있어 코드 중복을 줄이고 개발 효율을 높입니다. 

유지보수: 

기능별로 컴포넌트가 분리되어 있어 코드를 수정하거나 관리하기 용이합니다.

독립성: 

각 컴포넌트는 독립적으로 작동하므로, 한 컴포넌트의 변경이 다른 컴포넌트에 미치는 영향을 최소화할 수 있습니다.

---

---

컴포넌트의 종류

---

React 컴포넌트는 크게 두 가지 종류로 나눌 수 있습니다. 

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

JavaScript 함수 형태로 작성되며, 비교적 간단한 컴포넌트를 만들 때 주로 사용됩니다. 

최근에는 React Hooks의 등장으로 함수형 컴포넌트에서도 다양한 기능을 구현할 수 있게 되어 사용이 늘고 있습니다. 

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

JavaScript 클래스 형태로 작성되며, 상태(state) 관리나 생명주기 메소드 등 더 복잡한 기능을 구현할 때 사용되었습니다.

React.Component라는 클래스를 상속받아 만듭니다.

---

---

컴포넌트 이름 규칙

---

React 컴포넌트의 이름은 항상 대문자로 시작해야 합니다. 
React는 소문자로 시작하는 태그는 div, span과 같은 일반적인 HTML DOM 태그로 인식하기 때문입니다. 

 

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

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

 

jsx

---

---

결론

---

React 컴포넌트는 UI를 독립적이고 재사용 가능한 단위로 나누어 관리하게 해주는 React 개발의 핵심입니다. 

컴포넌트 기반으로 개발하면 코드를 더 효율적으로 작성하고 관리할 수 있으며, 복잡한 웹 애플리케이션을 체계적으로 구축할 수 있습니다.

---

---

Sample

---

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

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

// 3. 카드 컴포넌트 (div 태그 기반)
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>
        {props.links.map((link, index) => (
          <li key={index}>
            <NavLink url={link.url} text={link.text} />
          </li>
        ))}
      </ul>
    </nav>
  );
}

// 7. 메인 앱 컴포넌트 - 위에서 만든 컴포넌트들을 조합하여 사용
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;

 

컴포넌트와 프롭스를 적용한 예제

---