JSX

JSX란?

HTML 문법을 JavaScirpt 코드 내부에 쓴것
JSX는 자바스크립트 안에서 HTML 문법을 사용해서 view를 구성할 수 있게 도와주는 자바크스크립트 문법

ex)

const hi = <p>Hi</p>;

const myFavorite = {
	food: <li>샐러드</li>,
    animal: <li>dog</li>,
    hobby: <li>programming</li>
}

HTML이 .js의 변수에 저장되어 있다. 변수에 저장할뿐만 아니라 함수의 인자로도 넘길 수 있다.

JSX 사용 시 주의점

1. HTML요소에 class값을 정의할 때 원래 HTML에서는 <p class-"container">

   과 같이 하면 되었지만 class라는 단어가 ECMAScript6의 클래스 문법과 겹치는 예약어이기 때문에 className이라는 단어를 사용한다.

2. 루프문 예약어와 겹치는 for은 htmlFor로 사용한다.

3. 이벤트를 핸들링하는 onclick 등의 단어들은 onClick처럼 카멜표기법으로 표기한다.

4. JSX의 주석은 {/* 주석 */}으로 표현한다.

5. HTML Custom-Element는 <my-element>와 같이 표기했지만 React의 Custom Element는 <MyElement /> 와 같이 Pascal Case로 표기한다. 닫는 태그에는 꼭 명시적으로 /> 표기를 해준다.

6. JSX 내부에서도 JS를 사용할 수 있다. {}로 불러온다. {console.log(this.props)} 같은 식이다.

JSX attribute

1. 태그는 항상 닫혀있어야 한다.

• HTML에서 input이나 br을 사용할 때 태그를 닫지 않는 경우가 있다. 하지만 리액트에서는 반드시 클로징 태그를 써줘야 한다.

  ex)

  import React, { Component } from 'react';
  
  class App extends Component {
  	render(){
  		return (
  			<div>
            	<input type="text">  
  			</div>
  		)
  	}
  }
  
  export default App;

2. 어떤 태그라도 Self-closing tag가 가능하다.

   	<input> => <input />
   	<div></div> => <div />

3. 형제 노드를 작성할 수 없다.

   아래처럼 div가 이어진 형태로는 작성 불가

   import React, { Component } from 'react';
   
   class App extends Component {
   	render(){
   		return (
           <div></div>
           <div></div>
   		);
   	}
   }
   
   export default App;

   그래서 반드시 div나 Fragment태그로 감싸진 형태여야 한다.

   import React, { Component, Fragement } from 'react';
   
   class App extends Componet {
   	render(){
   		return (
   			<>
               <div></div>
               <div></div>
   			</>
   		);
   	}
   }
   
   export default App;

4. JSX 안에 자바스크립트 값은 다음과 같이 사용한다.

   변수를 먼저 렌더 안에서 정의하고 리턴에서 변수명을 중괄호로 감싼 형태로 표현한다.

   import React, { Component, Fragment } from 'react';
   
   class App extends Component {
   	render(){
   		const name = 'Edie';
   		const hello = 'Hello :)';
   
   		return(
   			<>
             	<div>{name}</div>
                 <div>{hello}</div>
             </>
   		);
   	}
   }
   
   export default App;

   Element Rendering 엘리먼트 렌더링

   html 요소(element) 또는 React 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것을 렌더링(rendering)이라고 말합니다.

   엘리먼트는 React의 가장 작은 단위입니다. 엘리먼트는 화면에 표시할 내용을 담고 있습니다.
   브라우저 DOM 엘리먼트와는 다르게 React 엘리먼트는 일반 객체이며 쉽게 생성할 수 있습니다.
   React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트합니다.

   function tick(){
   	const element = (
     	<div>
           <h1>Hello, world! </h1>
           <h2>It is {new Date().toLocaleTimeString()}.</h2>
   		</div>
     );
     ReactDOM.render(element, document.getElementById('root'));
   }
   
   setInterval(tick, 1000);

React 요소가 DOM node에 추가되어 화면에 렌더되려면 ReactDOM.render 함수를 사용합니다.
첫 번째 인자에는 JSX로 React 요소로 인자로 넘기고, 두 번째 인자는 해당 요소를 렌더하고 싶은 container(부모요소)를 전달합니다.