Atomic Habits

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

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>

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

React. ch1. 08. 리액트의 리랜더링  (0) 2021.10.10
React. ch1. 07. Review  (0) 2021.10.10
React. ch1. 05. Element 찍어내기  (0) 2021.10.09
React. ch1. 04. 멀티 Element 생성하기  (0) 2021.10.09
React. ch1. 02. DOM에 대한 이해  (0) 2021.10.09
'IT/React' Related Articles more
Comments