모델-뷰-컨트롤러(MVC) 설계 지침에 따라 구현된 화면 UI를 처리하는 클래스 또는 함수를 의미

• 클래스 컴포넌트

• 함수 컴포넌트

  • 데이터를 가진 0개 이상의 props 객체 인자를 받아 React 엘리먼트로 반환

  function Welcome(props) {
  	return <h1>Hello, {props.name}</h1> // Hello, Daniel
  }
  

컴포넌트 렌더링

• 리액트 컴포넌트

  • 리액트 프레임워크가 기본적으로 제공하는 컴포넌트
  • 컴포넌트 명을 소문자로 작성

• 사용자 정의 컴포넌트

  • 사용자가 필요에 따라 직접 구현한 컴포넌트
  • 컴포넌트 명을 항상 카멜케이스로 작성

  function Welcome(props) {
  	return <h1>Hello, {props.name}</h1>;
  }
  
  const root = ReactDOM.createRoot(document.getElementById('root'));
  const element = <Welcome name="Sara" />;
  root.render(element);
  

  <aside> 📌 컴포넌트의 이름은 반드시 대문자로 시작해야 함

  React는 소문자로 시작하는 컴포넌트를 DOM 태그로 처리하기 때문

  • <div />는 HTML div 태그를 나타내지만, <Welcome />은 컴포넌트를 나타내며 범위 안에 Welcome이 있어야 함 </aside>