[JSX] JSX 문법 기초

💡JSX란?

• 자바스크립트의 확장문법이다.
• index.js 에서 render 하는 방식
• 리액트 : 컴포넌트화 하는 놈
• index.js 파일은 모든 js 파일 다 모아놓은 놈
• 나머지 파일들은 싹 다 components폴더 집어넣음
• App.js 파일은 root.render( <App /> )로 한번에 export할 수 있음. 안 한다면 root.render()로 따로따로 해야하는데 그건 너무 안깔끔하달까..

💡render (엘리먼트 렌더링)

• 리액트 요소가 DOM node에 추가되어 화면에 렌더하기 위해 필요하다.
• render 안에는 큰덩어리 하나만 들어가야 한다
  -> 그래서 < div> 태그로 감싸줌

root.render(
  <div>
    <MainContent /> {/*component 호출*/}
    <SubContent />
    <Page />
  </div>
);

💡 리액트의 폴더구조

• 리액트하면 컴포넌트화!!
• 여기서 컴포넌트란? : 기능별로 파일을 만들어서 각 파일별로(컴포넌트별로) 관리를 할 수 있다. 그 컴포넌트들은 한군데에 또 모아줘야 해용

index.js

import { createRoot } from "react-dom/client"; //리액트에서 기본 제공하는 dom파일을 "가져온다". 기본으로 있는 html파일에 root id가 있음.
import Page from "./Page"; //Page 컴포넌트를 "가져 오는것"

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(<Page />);

page.js

import Header from "./components/Header";
import MainContent from "./components/MainContent";
import Footer from "./components/footer";
export default function Page() {
  return (
    <>
      <Header />
      <MainContent />
      <Footer />
    </>
  );
}

• index.js 파일로 다 보내준 파일(컴포넌트)이다. page에 각 파일들을(컴포넌트들을) 모은거임

Header.js

• src 폴더 안에 components폴더를 생성하여 그 밑에 폴더를 만들어 관리 해 준다.

export default function Header() {
  return (
    <div>
      <img src="Group.png" width="10px" />
      <h1>안녕하세요 홍길동 입니다.</h1>
    </div>
  );
}

MainContent.js

export default function MainContent() {
  return (
    <div>
      <ul>
        <li>생일 : 3000.03.03</li>
        <li>학교 : 길동길동 고등학교</li>
        <li>좋아하는 것 : 길동길동 파워![](https://velog.velcdn.com/images/byuneunhye/post/f626f983-b09b-4e34-a624-3164fcace994/image.png)
</li>
      </ul>
    </div>
  );
}

Footer.js

export default function Footer() {
  return <div>이 사이트의 주인은 ggg 입니다.</div>;
}