티스토리 뷰

리액트 스터디

[React] 5. 리액트 스터디 - JSX

더밸류(THEVALUE) 2022. 12. 28. 21:11

[ JSX ]

Javascript 언어에 XML을 추가하여 확장된 문법으로 리액트 프로젝트를 개발할 때 자주 사용되는 문법

Babel이란 도구를 이용하여 일반적인 자바스크립트 형태로 변환된 후 브라우저에서 실행이 됨 

일반적인 자바스크립트 문법과 HTML 문법이 혼용되어 사용됨 

 

https://babeljs.io/

 

Babel · The compiler for next generation JavaScript

The compiler for next generation JavaScript

babeljs.io

JSX 문법으로 작성된 코드를 일반 자바스크립트 형태로 변환해볼 수도 있으며,
라이브러리 문서를 확인할 수 있는 사이트 

 

리액트 문법을 통해 컴포넌트를 생성하여 화면에 렌더링 하는 방식에서 

JSX 문법을 통해 컴포넌트를 생성하는 방식으로 변환해서 사용

두 문법 간의 비교를 위해 아래 샘플 예시를 작성

 

[ React CreateElement 사용 예시 ]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 1. 라이브러리 (CDN)  -->
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>

<title>리액트 스터디중</title>
</head>
<body>
  <!-- 2. 출력 영역 지정  -->
  <div id="display"></div>
  
  <!-- 3. 화면에 출력될 내용 -->
  <script >
    const root = document.getElementById("display");
    const span = React.createElement(
      "span",
      null,
      "hello im span"
    );
    const btn = React.createElement("button", null, "click me!!");
    const container = React.createElement("div", null, [span, btn]);

    ReactDOM.render(container, root);
  </script>
</body>
</html>

 

[ JSX 사용 예시 ]

JSX 문법을 활용하여 변수 생성 시 변수명의 앞 글자는 반드시 대문자로 설정
소문자로 쓰면 HTML 태그로 인식하므로 대문자로 쓰는 것으로 약속됨
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 1. 라이브러리 (CDN)  -->
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<!-- Load Babel -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<title>리액트 스터디중</title>
</head>
<body>
  <!-- 2. 출력 영역 지정  -->
  <div id="display"></div>
  
  <!-- 3. 화면에 출력될 내용 -->
  <script type="text/babel">
    const root = document.getElementById("display");
   
    // arrow 함수 사용 + JSX 문법으로 컴포넌트 생성
    const Button = () => (
      <button 
        style={{
          backgroundColor: "tomato",
        }} 
        onClick={() => console.log("button clicked!!")}
      >
      Click Me!!!
      </button>
    );

    // 일반 함수처럼 사용
    function Button2() {
      return (
        <button 
          style={{
            backgroundColor: "tomato",
          }} 
          onClick={() => console.log("button clicked!! 2")}
        >
        Click Me!!!
        </button>
      )
    };

    const Container = (
      <div>
        <Button /> 
        <Button2 /> 
      </div>
    );
    ReactDOM.render(Container, root);
  </script>
</body>
</html>

'리액트 스터디' 카테고리의 다른 글

[React] 8. 리액트 스터디 - module css  (0) 2023.01.03
[React] 7. 리액트 스터디 - Props / memo / PropTypes  (0) 2023.01.02
[React] 6. 리액트 스터디 - State  (0) 2022.12.29
[React] 4. 리액트 스터디 - 클래스, 함수 사용  (0) 2022.10.04
[React] 3. 리액트 스터디  (0) 2022.09.28