[ vite+React 기초학습 3] 컴포넌트의 구성과 분리

컴포넌트란 무엇인가

컴포넌트는 재사용 가능한 UI 단위입니다. React는 컴포넌트를 조합하여 UI를 구성합니다. 쉽게 말하면, 컴포넌트는 웹페이지를 구성하는 '조각'입니다. 예를 들어 버튼, 카드, 입력창 같은 것들이 각각 하나의 컴포넌트가 될 수 있습니다. 이러한 컴포넌트들을 조립하듯이 모아 하나의 완성된 화면을 만들 수 있습니다.

기본 개념

• 함수형 컴포넌트가 기본
• props를 통해 부모 → 자식 데이터 전달

주요 사용 위치/상황

• UI 요소를 모듈화하고 재사용할 때
• 동적 데이터와 구조를 효율적으로 처리할 때

구체적 코드 예시

function UserCard({ name, age }) {
  return (
    <div>
      <h3>{name}</h3>
      <p>{age}세</p>
    </div>
  );
}

function App() {
  return <UserCard name="이선" age={33} />;
}

핵심 요점 정리

• 컴포넌트는 함수처럼 정의하여 사용할 수 있습니다
• props는 컴포넌트의 매개변수로 사용됩니다
• 파일로 분리해 유지 보수와 재사용성을 높입니다
• 부모 → 자식 데이터 흐름이 기본입니다

 

💬 댓글

이번 글이 도움이 되었길 바랍니다. 궁금한 점이나 요청이 있다면 언제든 댓글로 남겨주세요. 댓글은 저에게 큰 힘이 됩니다. 다음 글도 기대해주세요.