IT/React

React. ch1. 05. Element 찍어내기

체계성 2021. 10. 9. 20:42

 

<!DOCTYPE html>
<html lang="en">
  <body>
    <!-- 리액트를 사용하기 위한 CDN -->
    <script
      crossorigin
      src="https://unpkg.com/react@17/umd/react.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/@babel/standalone/babel.min.js"
    ></script>

    <!-- 1. JSX, Babel 이해하기 -->

    <div id="root1"></div>
    <div id="root2"></div>
    <div id="root3"></div>
    <div id="root4"></div>
    <div id="root5"></div>

    <!-- babel이 읽고 컴파일 후 js 식으로 표현할 영역 type="text/babel" -->
    <script type="text/babel">
      // 리액트에서는 하나의 태그(div, etc)를 만들어야만 그 안에 children을 주입할 수 있다.
      const rootElement1 = document.getElementById("root1");

      // 1. 빈 function 생성 후 찍어내기
      const paint1 = () => (
        <>
          <h1>a1</h1>
          <h2>b1</h2>
        </>
      );

      // 찍어내기
      const element1 = (
        <>
          {paint1()} {paint1()} {paint1()}
        </>
      );
      // JSX에 js를 주입할 경우 { } 안에 적는다
      ReactDOM.render(element1, rootElement1);

      // 2. 인자가 들어간 함수 생성 후 찍어내기
      const rootElement2 = document.getElementById("root2");
      const paint2 = (title, description) => (
        <>
          <h1>{title}</h1>
          <h2>{description}</h2>
        </>
      );
      const element2 = (
        <>
          {paint2("A2", "a2")}
          {paint2("B2", "b2")}
          {paint2("C2", "c2")}
        </>
      );
      // A2 ~ c2 까지 div 아래에 자식 요소로 생성
      ReactDOM.render(element2, rootElement2);

      // 3. Custom Element (1)
      const rootElement3 = document.getElementById("root3");
      const paint3 = (title, description) => (
        <>
          <h1>{title}</h1>
          <h3>{description}</h3>
        </>
      );

      const CustomElementPaint3 = ({ title, description }) => (
        <>
          <h1>{title}</h1>
          <h3>{description}</h3>
        </>
      );
      const element3 = (
        <>
          <CustomElementPaint3 title="A3" description="a3" />
          <CustomElementPaint3 title="B3" description="b3" />
          {paint2("C3", "c3")}
          {paint2("D3", "d3")}
        </>
      );
      // A3 ~ d3 까지 div 아래에 자식 요소로 생성
      ReactDOM.render(element3, rootElement3);

      // 4. Custom Element (2)
      const rootElement4 = document.getElementById("root4");

      {
        // CustomElement 는 UpperScore ! 첫 글자 대문자 규칙 !!
        // -> 함수의 형태인데 JSX 표현식을 반환하고, 인자에 여러 요소를 주입 가능!
        // CustomElementPaint4 의 우측 항목이 props인지 확인은?
        // children을 인자로 넣고 받아지는지 확인하면 된다.
      }
      const CustomElementPaint4 = ({ title, description, children }) => (
        <>
          <h1>{title}</h1>
          <h3>{description}</h3>
          {children}
        </>
      );

      // /* 위의 () => (); 는  () => {return }; 형태와 동일한 기능 */
      // const CustomElementPaint4 = ({ title, description, children }) => {
      //   return (
      //    <>
      //       <h1>{title}</h1>
      //       <h3>{description}</h3>
      //       {children}
      //    </>
      //   )
      // };

      const Good = () => <h3>Good</h3>;
      //const Good = <h3>Good</h3>;  -> ReactDOM.render() 로 주입

      const element4 = (
        <>
          <CustomElementPaint4 title="A4" description="a4">
            <h1>Children1</h1> {/*  */}
            <span>Children2</span> {/*  */}
            <Good />
            <Good />
          </CustomElementPaint4>
          <CustomElementPaint4 title="B4" description="b4" />
          <CustomElementPaint4 title="C4" description="c4" />
        </>
      );
      // A4 ~ c4 까지 div 아래에 동일한 자식 요소로 생성
      ReactDOM.render(element4, rootElement4);
    </script>
  </body>
</html>