Atomic Habits

React. ch1. 05. Element 찍어내기 본문

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>

'IT > React' 카테고리의 다른 글

React. ch1. 07. Review  (0) 2021.10.10
React. ch1. 06. JS와 JSX 섞어쓰기  (0) 2021.10.10
React. ch1. 04. 멀티 Element 생성하기  (0) 2021.10.09
React. ch1. 02. DOM에 대한 이해  (0) 2021.10.09
React. ch1. 01. React 란?  (0) 2021.10.09
'IT/React' Related Articles more
Comments