[React] JSX를 사용하는 리액트

Gangsan O·2022년 4월 12일
0

[책] 러닝 리액트

목록 보기
3/4
  • JSX : js + xml. 자바스크립트 코드 안에서 바로 태그 기반의 구문으로 리액트 엘리먼트를 정의할 수 있게 해주는 자바스크립트 확장

JSX로 리액트 엘리먼트 정의

<MyComponent list={[...]}/>
  • 컴포넌트의 프로퍼티는 문자열 혹은 자바스크립트 식expression만 올 수 있음
    • 자바스크립트 식은 중괄호{}로 감싸야 함 → 괄호안의 식은 평가되어 값으로 전달됨
  • 프로퍼티로 클래스 이름을 전달할 때는 class가 아닌 className으로 전달해야함(예약어 충돌 방지)
  • 브라우저는 JSX를 해석할 수 없음
    • createElement나 팩토리를 사용해 모든 JSX를 순수 리액트로 변환해야함
    • babel을 이용해 변환 가능

babel

  • 컴파일링(JSX → 순수 리액트)을 해주는 도구
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <!-- target container -->
    <div id="root"></div>
    <!-- React, ReactDOM library(for developer) -->
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

    <!-- Babel CDN link -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

    <script type="text/babel">
      // JSX code or other js file link
    </script>
  </body>
</html>
  • 브라우저 내에서 CDN링크를 직접 HTML에 포함시켜 바벨을 사용하는 방법은 가장 간단하지만 프로덕션에 사용할만큼 효율적이지 못함
  • import문을 지원하지 않는 브라우저들을 위해 babel이 require로 변환해줌
    • require함수는 common JS에서 모듈을 임포트할 때 사용하는 함수

webpack

  • 모듈 번들러
    • 여러 다른 파일들(JSX, CSS, Javascript 등)을 받아서 한 파일로 묶어주는 도구
profile
감동 코딩

0개의 댓글