[React.js] JSX 소개

JSX

리액트 확장자는 jsx를 사용한다.

js에서 리액트를 사용해도되나 Hook이라는 개념을 쓰지말라는 암묵적인 룰이 존재

그래서 jsx확장자를 사용한다는 내용

 

jsx에서는

const element = <h1>Hello, world</h1> 가

에러가 아니다. 자바스크립트 기반으로 동작하고 있기 때문에

{chktest.map((item, index) => (

          <option key={index} value={item}>

            {item}

          </option>

        ))}

이러한 문법으로 루핑을 돌리게된다.

JSX는 HTML보다는 JavaScript에 가깝다.

JSX에서는 class는 className가 된다

class는 예약어 때문에 사용이 안되기 때문이다.

<input type="text" className="{{}}">

function dd() {
        javascript
        return (
         <div></div>
)
}

이런형태의 문법을 사용한다.

 

자바스크립트 es5, es6 차이

// 일반적인 자바스크립트 함수(ES5)
function (인자) {
	함수 로직
}

// 화살표 함수(ES6)
(인자) => {
	함수 로직
}

 

es5, se6 변수 선언 차이

es5 : var

es6 : const, let

 

let은 업데이트될 수 있지만, 재선언은 불가능하다.

 

CSR : Client Side Randering

            * Google 검색 결과로 검색 안됨

SSR : Server Side Randering

            Node Server

 

https://reactjs-kr.firebaseapp.com/docs/introducing-jsx.html