React에서 지켜야할 가장 기본적인 문법

기존 js를 떠올려보면

카멜케이스(ex - yourName)
스네이크 케이스(ex - your_name)

같이 변수명 등을 설정하는 법을 기억할 것이다.

react도 동일하게 존재하는데 카멜케이스처럼 사용하지만?

맨 처음 글자부터 대문자!!

여기서 매우 중요한 부분은 react에선 첫 글자를 대문자로 안 적으면 실행마저 안된다는 것이다!

import React from "react";
import Layout from "Layout";

function App() {
  return (
    <Layout>
      <div>App 컴포넌트에서 보낸 값입니다</div>
    </Layout>
  );
}

export default App;

해당 코드는 App.js파일에서 Layout.js로 부모의 값 즉

    <Layout>
      <div>App 컴포넌트에서 보낸 값입니다</div>
    </Layout>

해당 부분을 Layout.js로 보냈고,

import React from "react";

function Layout(props) {
  return (
    <>
      <header
        style={{
          margin: "10px",
          border: "1px solid red",
        }}
      >
        항상 출력되는 머릿글입니다.
      </header>
      {props.children}
    </>
  );
}

export default Layout;

{props.children}을 통해 App.js에서 입력한

App 컴포넌트에서 보낸 값입니다

를 출력할 수 있었다. 그러나 실제로 자녀개념인 Layout.js에는
헤더부분에

항상 출력되는 머릿글입니다

가 스타일 먹인채로 존재하였는데, 나는 출력이 되지 않는 것이다

이렇게 말이다.
그 원인은 바로 맨 처음 설명한 대문자를 표기하지 않았던 이유인데,

Layout /Layout

이 부분을 layout으로 기재했더니 App.js에서의 내용은 정상 출력되나, style을 먹인 Layout.js의 내용은 무시되었던게 확인 되었으므로,

처음 시작하는 React 뉴비들은 항상 대문자를 잊지 말자!!!