리액트 입문 JSX(JavaScript + XML)

HTML을 품은 JS ⇒ JSX

JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법이다. JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다. 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

 

아래 같은 HTML 태그는 .js 파일 안에서 쓸 수 없다. 

<div>
	<h1>안녕하세요!</h1> 
	<p>시작이 반이다!</p>
</div>

 

 

그래서 나온 게 JSX이다. 자바스크립트 안에서 html 태그같은 마크업을 넣어 뷰(UI) 작업을 편하게 할 수 있다. 

const start_half = <div>
    <h1>안녕하세요!</h1>
    <p>시작이 반이다!</p>
  </div>;

 

 

# JSX에서 style 주는 법

// 중괄호를 두 번 쓰는 이유? 객체도 자바스크립트니까요!
// 이렇게 쓰거나,
<p style={{color: 'orange', fontSize: '20px'}}>orange</p>

//혹은 스타일 객체를 변수로 만들고 쓸 수 있어요!
function App() {
  const styles = {
    color: 'orange',
    fontSize: '20px'
  };

  return (
    <div className="App">
      <p style={styles}>orange</p>
    </div>
  );
}