firebase 구축 과정 중 의문점

회사 랜딩페이지 배포 중 파이어베이스를 공부하게 되었다.
노마드코더 무료 강의 공부 중 의문사항이 생겨 글을 쓰게 되었다.
노마드코더에서는 react로 강의를 진행하는데 프론트 언어는 잘 몰라서 강의를 따라하던 도중 변수를 대문자, 소문자 섞어쓰다보니 인식을 못하는 오류가 생겼다.

react의 공식 문서를 살펴보면
https://ko.legacy.reactjs.org/docs/jsx-in-depth.html

사용자 정의 컴포넌트는 반드시 대문자로 시작해야합니다

Element가 소문자로 시작하는 경우에는 <div> 나 <span> 같은 내장 컴포넌트라는 것을 뜻하며 'div' 나 'span' 같은 문자열 형태로 React.createElement에 전달됩니다. <Foo />와 같이 대문자로 시작하는 타입들은 React.createElement(Foo)의 형태로 컴파일 되며 JavaScript 파일 내에 사용자가 정의했거나 import 한 컴포넌트를 가리킵니다.

컴포넌트의 이름은 대문자로 시작하는 것을 추천합니다. 소문자로 시작하는 컴포넌트를 사용해야 한다면, 대문자로 시작하는 변수에 할당한 뒤 JSX에서 이 변수를 사용하세요.

예를 들어 아래의 코드는 예상대로 실행되지 않을 것 입니다.

import React from 'react';

// 잘못된 사용법입니다! 아래는 컴포넌트이므로 대문자화 해야 합니다.
function hello(props) {
  // 올바른 사용법입니다! 아래의 <div> 사용법은 유효한 HTML 태그이기 때문에 유효합니다.
  return <div>Hello {props.toWhat}</div>;
}

function HelloWorld() {
  // 잘못된 사용법입니다! React는 <hello />가 대문자가 아니기 때문에 HTML 태그로 인식하게 됩니다.
  return <hello toWhat="World" />;
}

이를 고치기 위해 우리는 hello 를 Hello로 바꾸고 이를 참조할 때 <Hello />를 사용할 것 입니다.

import React from 'react';

// 올바른 사용법입니다. 아래는 컴포넌트이므로 대문자로 시작해야 합니다.
function Hello(props) {
  // 올바른 사용법입니다! 아래의 <div> 사용법은 유효한 HTML 태그이기 때문에 유효합니다.
  return <div>Hello {props.toWhat}</div>;
}

function HelloWorld() {
  // 올바른 사용법입니다! React는 <Hello />가 대문자로 시작하기 때문에 컴포넌트로 인식합니다.
  return <Hello toWhat="World" />;
}

대문자를 사용하지 않으면 코드가 실행되지 않는다고 하니 주의하자!!