React 베이스캠프 | 위니북스

컴포넌트란?

2. 컴포넌트란?

컴포넌트는 React의 핵심 개념입니다. React 애플리케이션은 여러 개의 컴포넌트로 구성되며, 각 컴포넌트는 UI의 독립적이고 재사용 가능한 부분을 담당합니다.

2.1 컴포넌트의 개념

컴포넌트를 레고 블록에 비유할 수 있습니다. 작은 레고 블록들을 조합해서 큰 작품을 만들듯이, React에서는 작은 컴포넌트들을 조합해서 복잡한 UI를 만듭니다.

2.1.1 컴포넌트의 특징

독립적: 각 컴포넌트는 독립적으로 동작합니다
재사용 가능: 한 번 만든 컴포넌트를 여러 곳에서 사용할 수 있습니다
조합 가능: 여러 컴포넌트를 조합하여 더 큰 컴포넌트를 만들 수 있습니다

2.2 컴포넌트의 종류

React에는 두 가지 종류의 컴포넌트가 있습니다:

2.2.1 함수 컴포넌트 (Function Component)

function Welcome() {
  return <h1>안녕하세요!</h1>;
}

function Welcome() {
  return <h1>안녕하세요!</h1>;
}

2.2.2 클래스 컴포넌트 (Class Component)

class Welcome extends React.Component {
  render() {
    return <h1>안녕하세요!</h1>;
  }
}

class Welcome extends React.Component {
  render() {
    return <h1>안녕하세요!</h1>;
  }
}

현재는 함수 컴포넌트를 주로 사용합니다. 이 교재에서도 함수 컴포넌트를 중심으로 학습합니다.

2.3 첫 번째 컴포넌트 만들기

간단한 인사말 컴포넌트를 만들어보겠습니다.

// Greeting.js
function Greeting() {
  return (
    <div>
      <h1>안녕하세요!</h1>
      <p>React 컴포넌트입니다.</p>
    </div>
  );
}
 
export default Greeting;

// Greeting.js
function Greeting() {
  return (
    <div>
      <h1>안녕하세요!</h1>
      <p>React 컴포넌트입니다.</p>
    </div>
  );
}
 
export default Greeting;

2.4 컴포넌트 사용하기

만든 컴포넌트는 다른 컴포넌트에서 사용할 수 있습니다.

// App.js
import Greeting from './Greeting';
 
function App() {
  return (
    <div>
      <Greeting />
      <Greeting />
      <Greeting />
    </div>
  );
}
 
export default App;

// App.js
import Greeting from './Greeting';
 
function App() {
  return (
    <div>
      <Greeting />
      <Greeting />
      <Greeting />
    </div>
  );
}
 
export default App;

위 예제에서 Greeting 컴포넌트를 3번 사용했습니다. 이처럼 컴포넌트는 재사용이 가능합니다.

2.5 컴포넌트 구조화

실제 애플리케이션에서는 컴포넌트를 계층 구조로 구성합니다.

// Header 컴포넌트
function Header() {
  return (
    <header>
      <h1>나의 웹사이트</h1>
      <nav>
        <ul>
          <li>홈</li>
          <li>소개</li>
          <li>연락처</li>
        </ul>
      </nav>
    </header>
  );
}
 
// Main 컴포넌트
function Main() {
  return (
    <main>
      <h2>메인 콘텐츠</h2>
      <p>여기에 주요 내용이 들어갑니다.</p>
    </main>
  );
}
 
// Footer 컴포넌트
function Footer() {
  return (
    <footer>
      <p>© 2025 나의 웹사이트</p>
    </footer>
  );
}
 
// App 컴포넌트 (최상위)
function App() {
  return (
    <div>
      <Header />
      <Main />
      <Footer />
    </div>
  );
}

// Header 컴포넌트
function Header() {
  return (
    <header>
      <h1>나의 웹사이트</h1>
      <nav>
        <ul>
          <li>홈</li>
          <li>소개</li>
          <li>연락처</li>
        </ul>
      </nav>
    </header>
  );
}
 
// Main 컴포넌트
function Main() {
  return (
    <main>
      <h2>메인 콘텐츠</h2>
      <p>여기에 주요 내용이 들어갑니다.</p>
    </main>
  );
}
 
// Footer 컴포넌트
function Footer() {
  return (
    <footer>
      <p>© 2025 나의 웹사이트</p>
    </footer>
  );
}
 
// App 컴포넌트 (최상위)
function App() {
  return (
    <div>
      <Header />
      <Main />
      <Footer />
    </div>
  );
}

2.6 컴포넌트 이름 규칙

React 컴포넌트를 만들 때 지켜야 할 규칙들이 있습니다:

컴포넌트 이름은 대문자로 시작: Welcome (O), welcome (X)
의미 있는 이름 사용: UserProfile, TodoList 등
파일명도 컴포넌트명과 동일하게: UserProfile.js

2.7 컴포넌트를 만들 때 고려사항

2.7.1 단일 책임 원칙

하나의 컴포넌트는 하나의 역할만 담당해야 합니다.

2.7.2 재사용성

컴포넌트를 만들 때 다른 곳에서도 사용할 수 있도록 고려합니다.

2.7.3 가독성

컴포넌트 코드는 읽기 쉽고 이해하기 쉬워야 합니다.

2.8 실습: 간단한 카드 컴포넌트 만들기

// Card.js
function Card() {
  return (
    <div style={{
      border: '1px solid #ddd',
      borderRadius: '8px',
      padding: '16px',
      margin: '16px',
      boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
    }}>
      <h3>카드 제목</h3>
      <p>카드 내용입니다.</p>
      <button>더 보기</button>
    </div>
  );
}
 
// App.js에서 사용
function App() {
  return (
    <div>
      <Card />
      <Card />
      <Card />
    </div>
  );
}

// Card.js
function Card() {
  return (
    <div style={{
      border: '1px solid #ddd',
      borderRadius: '8px',
      padding: '16px',
      margin: '16px',
      boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
    }}>
      <h3>카드 제목</h3>
      <p>카드 내용입니다.</p>
      <button>더 보기</button>
    </div>
  );
}
 
// App.js에서 사용
function App() {
  return (
    <div>
      <Card />
      <Card />
      <Card />
    </div>
  );
}

2.9 정리

컴포넌트는 React의 기본 구성 단위입니다. UI를 독립적이고 재사용 가능한 조각으로 나누어 관리할 수 있게 해줍니다. 다음 장에서는 함수 컴포넌트에 대해 더 자세히 알아보겠습니다.