JSX

JSX 는 무엇인가?

• React 에서 사용하는 전용 HTML
  (웹브라우저는 HTML, CSS, JS 만 읽을 수 있기에, 최종적으로 소스코드가 실행될 때는 JSX가 HTML로 자동으로 변환되어 실행되는것)
• JSX 는 JavaScript XML 의 약자

(영문) JSX allows us to write HTML in React. JSX is a React extension to the JavaScript language syntax which provides a way to structure component rendering using syntax familiar to many developers.

-- 기존 HTML 방식 --
<div>
	<div class="title">제목</div>
    <button onclick="alert()">버튼</button>
<div>

  
-- JSX 방식 --
<div>
	<div className="title">제목</div>
    <button onClick="alert()">버튼</div>
</div>

• 속성값의 대소문자 정도 차이 등을 제외하고 거의 비슷!

JSX 사용법?

1) JSX 의 경우 자바스크립트와 HTML 을 같이 작성한다

아래 참조
function App() {

**// 자바스크립트 작성**

return (

	**// html 작성**
    
	<h1>Hello, React!!</h1>
)

}

2) 부모 요소로 부터 보호 받음

반드시 부모 요소 하나가 감싸는 형태!
function App() {
return (

	<div>
    	<div>hello</div>
        <div>react</div>
    </div>
)

}

3) 스타일 구현

JSX에서 자바스크립트 문법을 쓰려면 {}을 써야 하기 때문에, 스타일을 적용할 때에도 객체 (object) 형태로 넣어주어야 한다.
function App() {
const style = {
backgroundColor: 'red',
fontSize: '16px'
}
return (

	<div style= { style } >
    	hello, react
    </div>
)

}
JSX에서는 카멜 표기법 (camel Case)로 작성해야한다.

왜 JSX 를 사용하는가?

• JSX 를 사용하면 길게 늘어져 있는 html 파일로부터 각가의 의미있는 ul (unordered list) 요소를 컴포넌트로 분리할 수 있게 함으로써 관심사의 분리 가능

• 의미를 갖는 조각으로 분리함으로써 자바스크립트 코드 안에서 UI과련 작업을 할 때 시각적으로 도움을 줌.

• 코드의 재사용성으로 높여 유지보수가 쉬운 UI를 만들 수 있음.