React - JSX

JSX

JSX는 리액트 문법으로 React요소를 만들고 DOM에 렌더링 시켜서 그립니다.
자바스크립트 안에 html태그같은 마크업을 넣어 뷰(UI) 작업을 편하게 할 수 있습니다.

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

1. JSX 규칙

• 태그 닫기
• 무조건 1개의 엘리먼트를 반환하기
• JSX에서 javascript를 가져올때 중괄호 사용 { }

import React from 'react';

// 자바스크립트 표현
function App(){
	const name = 'react';
	return(
    	<>
          <h1>Hello! {name}</h1>
          <h2>Is it working well?</h2>
        <>
    )
}

export default App;

• class 대신 className 사용
• 조건부 연산자 - jsx 내부의 자바스크립트 표현식에서 if문을 사용할 수 없다. 하지만 조건에 따라 렌더링해야 할때는 JSX밖에서 if문을 사용하여 사용하여 사전에 값을 설정하거나, { } 안에 조건부 연산자를 사용해야 한다.(삼항식)

import React from 'react';

// 자바스크립트 표현
function App(){
	const name = 'react';
	return(
    	<div>
        	{name === 'react'? (
             	<h1>This is react</h1>
             ) 
             : (<h2>This isn't react</h2>)}
        </div>
    )
}

export default App;

• 인라인 style 문법

<p style={{color : 'orange' }>orange</p>