본문 바로가기
Front/React.js

[React] React 시작하기 : JSX

by SIXXXX_ 2023. 1. 8.
728x90

JSX

JSX (JavaScript 와 XML) 라는  HTML-in-JavaScript 문법 사용 (https://ko.reactjs.org/docs/introducing-jsx.html)

 JSX : Javascript 를 확장한 문법이다.

  • React element 를 생성한다. 
  • React 에서는 본질적으로 렌더링 로직이 UI 로직(이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결된다는 사실
  • 컴포넌트라 부른는 느슨하게 연결된 유닛으로 관심사를 분리한다.
  • 표현식으로 컴파일이 끝나면 JSX 표현식이 정규 JS 함수 호출이 되고, JS 객체로 인식된다.
  • React DOM은 HTML 어트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용

기본적으로 React DOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프 하므로, 애플리케이션에서 명시적으로 작성되지 않은 내용은 주입되지 않습니다. 모든 항목은 렌더링 되기 전에 문자열로 변환됩니다. 이런 특성으로 인해 XSS (cross-site-scripting) 공격을 방지할 수 있습니다.

 

 

 

Reference