| React | 무적권 알고가야 할 JSX 문법 : 부모 요소, className, style속성, {중괄호}

 

근데,,, JSX 가 뭐져??

- JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법이다.  
- JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다.

---

<우리가 알아야할 JSX 문법 >

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

:  Virtual DOM(가상돔)에서 컴포넌트 변화를 감지할 때 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있다.

// div를 사용해서 스타일 적용시 작성한 코드를 div로 한번 더 감쌌다는 부분을 고려해야 한다.
function App() {
	return (
		<div>
			<div>Hello</div>
			<div>world</div>
		</div>
	);
}

 밖에 감싸주는 태그를 다른걸로 대체할 수 있다. 

▶   <Fragment></Fragment>    

: <div> 보다 무거운 편이다. 

▶   <>  </>

 

🚫  에러 케이스 

return()안에는 병렬로 태그 2개이상 기입 금지

function App() {
	return (
		<div>Hello</div>
		<div>NONONO</div>
	);
}

 

2.    { 중괄호 }

 

▶  변수를 html에 꽂아넣을 때

let name = "혜빈";

 

이런 변수를 생성하면  보통 자바스크립트에서 이렇게 가져온다.

document.getElementById().innerHTML = name;

 

하지만 이렇게 가져오는게 아니라 리액트에서는 !

<h4> { name } </h4>

원하는 곳에 중괄호를 써서 변수를 넣어주면 된다.

 

 

▶  자바스크립트 표현식 을 작성하려면 JSX내부에서 코드를 { } 로 감싸주면 된다.

 

3.   camelCase 프로퍼티 명명 규칙을 사용한다.

▶     class 대신 className

▶     style속성 

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

{} 하나는 js

{} 하나는 객체

보통 중간에 - 표시된 부분들이 마이너스로 인식되어 camelCase로 표현하는 것이다.