[React] JSX, Component

1. JSX 문법 규칙

1. 반드시 부모로 묶여 있어야 된다

2. 태그가 비어있을 때 <></>(fragment태그)

3. 태그는 반드시 닫혀있어야 함

2. 컴포넌트 사용 규칙

1. 파일명 첫글자는 대문자

2. 내보내기(export)

3. 필요로 하는 컴포넌트에서 불러오기(import)를 해야함

3. 내보내기(export)

내보내기에는 두 가지 방법이 있음.

1. 함수 밑에 export default 함수명 >
   
   => 모듈은 기본 내보내기 딱 하나만 가능
2. 함수명 앞에 export 입력

4. 불러오기(import)

1. 최상단에 import 함수명 from "경로";

=> export default로 기본 내보내기를 한 경우

2. 최상단에 import {함수명} from "경로";

=> 함수명 앞에 export를 사용한 경우


=> 두 개 이상의 함수를 가져오는 경우 ,을 사용하여 함수명 입력

ex) import {Text, Text2} from "./components/Text";

index.js

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

=> 아무것도 건들지 않았음

App.js

import { Text, Text2 } from "./components/Text";

function App() {
  return (
    <>
      <div>1번</div>
      <div>2번</div>

      <Text />
      <Text2 />
      {/* => 컴포넌트 */}
    </>
  );
}

export default App;

Text.js

export const Text = () => {
  return (
    <>
      <h1>컴포넌트는 무엇일까요?</h1>
      <h1>컴포넌트는 무엇일까요?</h1>
      <h1>컴포넌트는 무엇일까요?</h1>
      <h1>컴포넌트는 무엇일까요?</h1>
      <h1>컴포넌트는 무엇일까요?</h1>
      <h1>컴포넌트는 무엇일까요?</h1>
    </>
  );
};

export const Text2 = () => {
  return <div>두 번째 텍스트</div>;
};