1. JSX

 

JSX 정의

• JSX(JavaScript XML)의 줄임말로 '자바스크립트에 XML을 추가한 확장형 문법'이다.
• 이때 XML 또한 HTML을 확장한 문법이므로, JSX는 하나의 파일에 자바스크립트와 HTMl을 동시에 작성한다.
• JSX는 간결성, 가독성, 버그 발견 가능성이 높고,  Injection Attacks 방어가 가능하다는 장점이 있다.

//두 코드의 실행 결과는 동일

//JSX를 사용한 코드
const element =(
  <h1 className="greeting">
       Hello, world!
     </h1>;
    )
    
//JSX를 사용하지 않은 코드
//React.createElement() 사용
const element = React.createElement(
  'h1',
  {className : 'greeting'},
  'Hello', world!'
)

 

 

ReactDOM.render(element, container)

• JSX를 화면에 렌더링 하기 위해 사용하는 함수
• element : JSX로 작성한 화면에 출력할 내용
• container : 첫 번째 인자인 JSX를 랜더링해서 보여줄 DOM 안의 위치

ReactDom.render(
  <h1> Hello world! </h1>,
  document.body
);

 

 

사용법

• XML 중간에 JavaScript 코드 사용 : ...XML/HTMl + {JavaScript 코드} + ...XML/HTML
• 태그 짝 맞춰서 닫기 : <div></div>, <p></p>, <img/>, <input/>. 
• 태그 속성(attribute)에 값 삽입 : 큰따옴표 사이에 문자열 삽입, 중괄호에 자바스크립트 코드 삽입
• 렌더링 될 root element는 하나만 존재

//속성에 값 삽입
const element = <div tableIndex="0"></div>;
const element = <img src={user.avatarUrl}></img>;

//오직 하나의 root element
ReactDom.render(
  <div>
    <div>
      Hello
    </div>
    <div>
      Bye
    </div>
  </div>,
  
  document.body
)