이름 규칙

JSX 태그 이름은 첫 글자로 역할이 갈린다

소문자로 시작하면 브라우저 DOM 태그, 대문자로 시작하면 직접 만든 React 컴포넌트로 해석됩니다.

lowercase

브라우저 요소로 렌더링

<div className="App">
  <button onClick={handleClick}>클릭</button>
</div>

div, button, input처럼 HTML에 있는 태그 이름은 실제 DOM 요소를 만들 때 사용됩니다.

Uppercase

컴포넌트 함수로 호출

<WelcomeMessage
  title="환영합니다!"
  message="즐거운 리액트 학습 되세요!"
/>

WelcomeMessage는 import되거나 같은 파일에 정의된 컴포넌트이며, props를 받아 JSX를 반환합니다.

1

대문자로 시작

MyButton처럼 이름을 쓰면 JSX가 사용자 정의 컴포넌트로 구분합니다.

2

정의 또는 import

JSX에서 사용한 컴포넌트 이름은 현재 스코프에서 찾을 수 있어야 합니다.

3

props로 설정

title, message 같은 속성은 컴포넌트 함수의 props 입력값이 됩니다.

태그 이름
첫 글자
DOM 또는 컴포넌트
props 전달
JSX 반환