JSX -> Basic

JSX -> JavascriptXML의 줄임말.

> 해당 형식으로 작성된 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. (리액트 엔진은 JSX의 XML 구조를 분석하여 JS Code로 변환)

> 이러한 리액트 엔진은 선언형 화면(Declarative View)기술이라 부른다.

> div / span 같은 HTML 태그를 사용 할 수 있다. 또한 JSX로 만들어진 Component를 태그 형식으로 사용 할 수 있다.

 

JSX 문법

 

> 감싸인 요소

 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다. Virtual DOM은 컴포넌트의 변화를 효율적으로 비교할 수 있도록 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있다.

 

React 16v 이상 버전부터는 div 태그 뿐 만 아니라 Fragment 기능을 사용할 수 있다. (Fragment Component를 불러옴으로써)

 

1	import React, { Fragment } from 'react';

 

굳이 불러오지 않고도, JSX 코드 내 <> </>로 감싸도 같은 기능으로 적용된다.

반대로 HTML에서는 굳이 요소를 닫지 않아도 상관 없었으나, 리액트에는 반드시 요소를 닫아주어야 하며, 태그 사이에 내용이 필요 없는 경우에는 self-closing 을 사용한다. ex) <input />

 

> 자바스크립트 표현

 JSX가 단순 DOM 요소를 렌더링하는 기능만 있는 것이 아니다. JSX 안에는 JS 표현식을 사용 할 수 있으며, 코드를 { } 로 감싸면 Code가 실행된다.

 단 IF 문을 사용할 수 없으므로 조건부 연산자를 대신 사용해야 한다. => IF(?), AND(&&), OR(||)

1	{ value == 'True' ? ( <H1>True.</H2> ) : ( <H1>False</H2> ) }

 주석은 오로지 Javascript Code내에서만 가능하기에 반드시 { } 요소 사이에 Javascript 주석을 사용하여 저장 해야 한다.

 

> 인라인 스타일링

 리액트 내의 DOM 요소에는 문자열 형태가 아닌 객체 형태로 넣어야 하기 때문에, '-'으로 표시된 이름은 사용해선 안된다.

 이러한 스타일 요소는 camel case로 변환해준다. ex ) background-color > backgroundColor

 또한 CSS Class를 사용할 수 없기에, className으로 설정해야 CSS가 바르게 적용된다.

 

> props 렌더링

 props 값은 컴포넌트 함수의 파라미터로 받아와서 사용할 수 있다.

 

> JSX는 Markup 표현식을 모두 사용 할 수 있다.