[React.js] JSX란

JSX란

1. Javascript의 확장 문법 : Javascript + XML/HTML
2. 자바스크립트에서 HTML을 작성하듯이 비슷하게 작성할 수 있도록 해주는 것
3. 브라우저에서 식행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

// ---------------------------------------------------------
React.createElement(
	type,
	[props],
	[…children]
)
// ---------------------------------------------------------
// JSX 사용 X
React.createElement('div', null, `Hello, ${name}`);
// JSX 사용 O
<div>Hello, {name}</div>
// ---------------------------------------------------------
function App() {
	return (
		<div>
			Hello <b>react<>
		</div>
	);
}
// 위 문법은 아래와 같이 변환된다. 
function App() {
	return React.createElement("div", null, "Hello", React.createElement("b", null, "react"));
}

사용법

1. 반드시 부모 요소 하나가 감싸는 형태여야 한다.

// 오류 코드
function App() {
  return (
    <div>Hello</div>
    <div>World!</div>
  );
}
// 정상 코드 
function App() {
	return (
		<div>
			<div>Hello</div>
			<div>World</div>
		</div>
	);
}

2. 자바스크립트 표현식 (데이터바인딩)

// JSX안에서 자바스크립트 표현식을 사용하고 싶다면 코드를 {}로 감싸주면 된다.
function App() {
	const name = "WW";
	return (
		<div>
			<div>Hello</div>
			<div>{name}!</div>
		</div>
	);
}
// 태그의 속성(attribute)에 값을 넣는 방법
const element1 = <div tabIndex="0"></div>
const element2 = <img src={user.avatarUrl}></img>

3. if문 대신 삼항 연산자를 사용

조건에 따라 다른 컴포넌트를 랜더링 하고 싶을 때에는 JSX 외부에서 사용하거나, { }안에서 삼항 연산자를 사용한다.

// 1. 외부에서 사용 
function App() {
	let component = ''
  	const name = "MM";
  	if (name === 'MM'){
    	component = <div>MM 입니다.</div>
  	} else{
    	component = <div>누구세요?</div>
  	}
  	return (
    	<div>
      		{component}
    	</div>
  	);
}
// 2. 내부에서 사용
function App() {
  	const name = "MM";
  	return (
    	<div>
      		{name === 'MM' ? <div>MM 입니다.</div> : <div>누구세요?</div>}
    	</div>
  	);
}
// 3. AND 연산자 (&&) 사용
function App() {
  	const name = "MM";
  	return (
    	<div>
    		//조건이 만족하지 않으면 아무것도 보이지 않는다.
      		{name === 'MM' && <div>MM 입니다.</div>} 
    	</div>
  	);
}

4. CamelCase 규칙 사용

• JSX Style
  JSX에서 자바스크립트 문법을 사용하려면 { }을 써야하기 때문에 스타일을 적용할 때에도 객체 형태로 넣는다.
  CamelCase로 작성해야 한다.(font-size -> fontSize)

function App() {
  	const style = {
    	backgroundColor: "red",
    	fontSize: "12px",
  	};
  	return <div style={style}>MM 입니다.</div>;
}
// or {{ }}중괄호 두개 (객체형)
<h4 style={{color:'bure', fontSize:'21px'}}>hihi</h4>

• JSX Class
  JSX에서 class를 넣을때 class가 아닌 className을 사용해야 한다.

<div className="backgound_class">