[React]JSX가 무엇인가요?

JSX는 속성이 붙은 복잡한 DOM 트리를 작성할 수 있는 간편한 문접을 제공한다. 또한 리액트 팀은 JSX가 HTML이나 XML처럼 리액트를 더 읽기 쉽게 만들어 주기를 원했다. JSX에서는 태그를 사용해 엘리먼트의 타입을 지정한다. 태그의 속성은 프로퍼티를 표현한다. 여는 태그와 닫는 태그 사이에 엘리먼트의 자식을 넣는다.

JSX 엘리먼트에 다른 JSX 엘리먼트를 자식으로 추가할 수 있다. JSX로 정의한 ul엘리먼트가 있다면 JSX 태그를 사용해 만든 자식 리스트 원소들을 ul엘리먼트에 추가할 수 있다. 결과는 HTMLRHK 비슷해 보인다.

<ul>
	<li>연어 500 그램</li>
    <li>잣 1 컵</li>
    <li>버터 상추 2컵</li>
    <li>옐로 스쿼시(Yellow Squash)1개</li>
    <li>올리브 오일 1/2 컵</li>
    <li>마늘 3쪽</li>
</ul>

JSX는 컴포넌트와도 잘 작동한다. 단순히 클래스 이름을 사용해 컴포넌트를 정의하자. IngredientsList에게 JSX 프로퍼티로 재료 배열을 넘기는 모습을 볼 수 있다.

	React Element		React.createElement(IngredientsList,{list:[...]});


    		JSX							  	<IngredientsList list={[...]}/>

재료 배열을 이 컴포넌트에 넘길 때는 중괄호({})로 감싸야 한다. 이렇게 중괄호로 감싼 코드를JSX라고 부른다. JSX에서 컴포넌트에게 프로퍼티 값으로 자바스크립트 값을 넘기려면 자바스크립트 식을 꼭 사용해야 한다. 컴포넌트의 프로퍼티는 문자열과 자바스크립트 식의 2가지 유형이 있다. 자바스크립트 식에는 배열, 객체, 함수 등 포함된다. 배열, 객체, 함수 등의 자바스크립트 값을 포함시키려면 자바스크립트 값 주변을 중괄호로 감싸야만 한다.