리액트에서 컴포넌트 이름을 대문자로 시작해야 하는 이유

리액트에서 컴포넌트 이름을 대문자로 시작해야 하는 이유는

내장된 html 태그와 사용자 정의 컴포넌트를 구분하기 위해서이다.

 

리액트는 소문자로 시작하는 요소는 기본 DOM 요소로 인식하고, 대문자로 시작하는 요소를 사용자가 정의한 리액트 컴포넌트로 인식한다.

즉, <div>, <span>처럼 소문자로 시작하는 태그는 html의 기본 DOM 요소이고, 대문자로 시작하는 <MyComponent>같은 이름은 리액트 컴포넌트이다.

 

import React from 'react';

// 대문자로 시작하는 사용자 정의 컴포넌트
function MyComponent() {
  return <h1>My Custom Component</h1>;
}

function App() {
  return (
    <div>
      <MyComponent />
      <p>This is a paragraph.</p>
    </div>
  );
}

export default App;

 

컴포넌트 이름이 소문자로 시작할 경우 리액트가 html 태그로 인식해서 오류가 발생할 수 있다.