IT/React

React. ch1. 06. JS와 JSX 섞어쓰기

체계성 2021. 10. 10. 11:31

○ Tip

 - 개발자 도구 > console 창 > "jimmy".charAt(2); > 바로 결과 확인 가능

  ▷ "jimmy".charAt(0);  [enter] -> 'j'

  ▷"jimmy".charAt(0) === "jimmy".charAt(0).toUpperCase();  [enter] -> false

  ▷const text = "Text"; [enter]

     text.charAt(0) === text.charAt(0).toUpperCase();  [enter] -> true

 

○ HTML tag 를 생성할 때, js의 복잡한 연산을 적용할 수 있다.

 

○ 코드

<!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>

    <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">
      // 1. 대문자, 소문자 구별 없이 기본 출력
      const rootElement1 = document.getElementById("root1");
      const V1 = ({ text }) => {
        return (
          <>
            <h1>{text}</h1>
            <h3>{text}</h3>
          </>
        );
      };

      const element1 = (
        <>
          <V1 text="A1" />
          <V1 text="a1" />
        </>
      );
      ReactDOM.render(element1, rootElement1);

      // 2. 첫 글자가 대/소문자에 따라 다른 크기로 반환하자.
      const rootElement2 = document.getElementById("root2");

      const V2 = ({ text }) => {
        // 이 라인 전체는 js 인데 jsx 를 반환한다.
        if (text.charAt(0) === text.charAt(0).toUpperCase()) {
          // charAt, ===, toUpperCase return, {text-변수} ... -> js code
          // <h1>, </h1> -> jsx code
          return <h1>{text}</h1>; // -> jsx "<>tag 안에 {} 변수 주입"
        } else {
          return <h3>{text}</h3>;
        }
      };

      const element2 = (
        <>
          <V2 text="A2" /> {/* < ... /> 정상 vs < ... > 에러 */}
          <V2 text="a2" />
        </>
      );
      ReactDOM.render(element2, rootElement2);
      // return 안에 있는 HTML 같은 코드들은 실제 HTML이 아니다.
      // 이건 실제로 자바스크립트 입니다.
      // JSX로 작성하게 되면 이를 React.createElement를 사용하는 자바스크립트 형태로
      // 변환 시켜주게 된다.

      // 3. 홀수/짝수에 따라 크기를 다르게 반환하자.
      const rootElement3 = document.getElementById("root3");

      function Func3({ num }) {
        // {num} : num 라는 props를 받는다.
        return num % 2 === 0 ? <h1> {num}</h1> : <h3>{num}</h3>;
      }
      // const Number = ({num}) => {}; 위 function 표기법과 동일

      const element3 = (
        <>
          <Func3 num={1} />
          <Func3 num={2} />
          <Func3 num={3} />
          <Func3 num={4} />
        </>
      );

      ReactDOM.render(element3, rootElement3);

      // 4. selected flag에 따라 크기를 다르게 반환하자. (1)
      const rootElement4 = document.getElementById("root4");

      const Func4 = ({ num, selected }) => {
        return selected ? <h1>{num}</h1> : <h3>{num}</h3>;
      };

      const element4 = (
        <>
          <Func4 num={10} />
          <Func4 num={20} />
          <Func4 num={30} selected={true} /> {/* 1, "a", */}
          <Func4 num={40} selected={false} /> {/* 0, "", */}
        </>
      );

      ReactDOM.render(element4, rootElement4);

      // 5. map과 selected flag에 따라 크기를 다르게 반환하자. (2)
      const rootElement5 = document.getElementById("root5");

      const Func5 = ({ num, selected }) => {
        return selected ? <h1>{num}</h1> : <h3>{num}</h3>;
      };

      const element5 = (
        // js의 복잡한 연산을 element를 생성하는 곳에 적용하는 장점
        <>
          {[1, 2, 3, 4, 5, 6].map((n) => (
            <Func5
              className="title"
              key={
                n
              } /* map의 경우 unique한 key 항목을 주지 않으면 warning 발생 */
              num={n}
              selected={n === 2 || n === 5}
            />
          ))}
        </>
      );

      ReactDOM.render(element5, rootElement5);
    </script>
    <style>
      .title {
        color: red;
      }
    </style>
  </body>
</html>