[React] 리액트 기초

🎈 기본 형식

🔰 1. 요소 생성

const 요소 = React.createElement(태그, 내용)

const 요소 = React.createElement(
  "h1",
  {
    className: "class",
  	children: "hello"
  },
  "content text"
)

🔰 2. 요소 삽입 (ReactDOM)

ReactDOM.render(요소, 루트요소)

🎈 JSX 문법

HTML 같이 생긴 Javascript 확장 문법

🔰 Babel

jsx를 사용할 수 있게 해주는 컴파일러

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

jsx가 포함된 파일 import 시 타입 지정 필요

<script type="text/babel">

jsx 문법을 사용한 요소 생성

const 요소 = <h1 class={className}> {content} </h1>
// className, content는 javascript 변수

🔰 spread 연산자 사용

const obj = {
  class: "class name"
  children: "children"
}

const 요소 = <h1 (...obj) />
// == (<h1 class={obj.class} children={obj.children} />)

🎈 Flagment (빈 태그)

한 루트에 자식 요소를 여러개 생성할 때 사용
빈 태그로 생략 가능: <> = <React.flagment>

const 요소= (
  <>
    <h1>Title</h1>
  	<h3>Headline</h3>
  	<h5>content</h5>
  </>
)

🎈 custom 태그

함수로 custom 태그를 생성
custom 태그는 반드시 대문자로 시작

const Paint = ({ title, headline, children }) => {
  return (
    <>
      <h1>{title}</h1>
      <h3>{headline}</h3>
      {children}
    </>
  )
}

const 요소 = (
  <>
    <Paint title="제목1" headline="헤드라인1">
      내용(자식요소, 여러개 가능, custom태그요소 사용가능)
    </Paint>
  </>
)