JSX

JSX(Javascript XML)

JSX(Javascript XML) Javascript에 XML을 추가한 확장한 문법

• react 프로젝트를 개발할 때 사용하기 때문에 공식 자바스크립트 문법은 아니다.

• 브라우저에서 실행하기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

• Interface가 어떻게 생겨야 하는지 설명하기 위해 react와 함께 사용할 것을 권장하며 자바스크립트에서 HTML을 작성하는 것 같기 때문에 가독성이 높고 편리하다.

문법

• 자바스크립의 값을 JSX 안에서 렌더링할 수 있다.

function App(){
	return(
    <h1>Hello, World</h1>
    );
}

• 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나가 감싸야한다.

function App(){
    return(
    	<div>
        	<h1>테스트1</h1>
        	<h2>테스트2</h2>
        </div>
    )
}

• class = "" 이 아니라 className= ""
  위에 언급한 것처럼 JSX는 HTML을 작성하는 것과 같다. 하지만 조금 다른 부분이 있다. 예를 들면 css 스타일을 줄 때 사용하는 class 명은 class = "" 이 아니라 className= "" 이라고 명한다. 왜냐하면 JSX는 일종의 자바스크립트라서 자바스크립트에서 사용하는 예약어인 class를 막 사용하면 안된다.

function App(){
    return(
    	<div>
        	<div className="classEx1"></div>
        </div>
    )
}

• 변수를 jsx에 넣을 때는 {중괄호} 를 사용한다.
  중괄호 안에 데이터를 바인딩하고 싶은 변수명만 담으면 된다.

function App(){
	let name = 'sohyeon'
    return(
    <div className="App">
        <div className="Container">
          <div>너의 이름은</div>
          <div>{name}</div>
    	</div>
    </div>
    )
}

• html에 style 속성 넣기
  JSX에서는 style={} 안에 {} 자료형으로 집어 넣어야한다.
  {속성명 : '속성값'}

<div style={{color : 'blue', fontSize : '30px'}}>이름</div>

• JSX 내에서 주석을 작성할 때에는 { / … / } 와 같은 형식으로 작성한다.

참고 및 출처
https://ko.reactjs.org/docs/introducing-jsx.html
https://codingapple.com/unit/react2-jsx-classname-html/