[React]JSX

🤔JSX란?

쉽게 말해 HTML 문법을 JavaScript 코드 내부에 쓴 것이 바로 JSX다!
(JavaScript eXtension)

즉, JavaScript의 확장 버전으로 자바스크립트라고 보면된다.

 

"React에서 HTML을 표현할 때, JSX를 사용한다. 외관상 HTML같은 마크업 언어를 리터럴로 입력하는 것으로 보이는데, 빌드 시 Babel에 의해 자바스크립트로 변환된다. 자바스크립트 코드를 HTML처럼 표현할 수 있기 때문에 용이한 개발이 가능하다."

[출처]나무위키

즉, JSX는 자바스크립트 안에서 HTML 문법을 사용해서 view를 구성할 수 있게 도와주는 자바스크립트 문법이며 리액트 개발에 엄청난 도움을 주고 있다.

 

React.js 는 일반 JavaScript 문법이 아닌 JSX 문법을 사용하여 UI를 템플릿화 한다.

JSX를 사용하는것이 필수는 아니지만 이를 사용하면 다음과 같은 장점이 있다.

• JSX는 컴파일링 되면서 최적화 되므로, 빠르다
• Type-safe (어떠한 연산도 정의되지 않은 결과를 내놓지 않는것, 즉 예측 불가능한 결과를 나타내지 않는 것 [출처: jerrypop 블로그]) 하며 컴파일링 과정에서 에러를 감지 할 수 있다.
• HTML에 익숙하다면, JSX를 사용하여 더 쉽고 빠르게 템플릿을 작성 할 수 있다.

 

한번 아래 코드들을 통해 JSX에 대하여 알아보지

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

해당 코드는 아래와 같이 변환된다.

function App(){
	return React.createElement("div", null, "Hello", React.createElement("b", null,"react"));

•  JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리하다.
• 자바스크립트에서 HTML을 작성하듯이 하기 때문에 가독성이 높고 작성하기 쉽다.
  
  

📌

Q . JSX는 자바스크립트 문법인가요?    A . JSX는 리액트로 개발할 때 사용되는 것으로 자바스크립트 문법이 아니다. 바벨에서는 여러 문법을 지원할 수 있도록 preset 및 plugin을 설정한다. 바벨을 통해 개발자들이 임의로 만든 문법, 혹은 차기 자바스크립트의 문법들을 사용할 수 있다.

---

JSX 문법 규칙

 

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

 Virtual DOM에서 컴포넌트 변화를 감지할 때, 컴포넌트 내부에서는 하나의 DOM 트리 구조가 이뤄져야한다.

예시

(<div></div>)

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

(<Fragment></Fragment>)

// <Fragment>를 사용가능 하지만 <div>태그보다 무거운 편이다.
function App() { 
	return ( 
    	<Fragment>
        	<div>Hello</div> 
            	<div>GodDaeHee!</div>
       	</Fragment>
		);
}

(<></>)

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

 

2. 자바스크립트 표현식

• JSX 안에서도 자바스크립트 표현식을 사용할 수 있다. 자바스크립트 표현식을 작성시 JSX내부에 코드를 { }로 감싸주면 된다.
• 해당 링크에 있는 모든 JavaScript 표현식을 넣을 수 있다.

function App() { 
	const name = 'GodDaeHee'; 
    return ( 
    	<div>
        	<div>Hello</div> 
           	<div>{name}!</div> 
	</div>
	); 
}

3. if문(for문) 대신 삼항 연산자(조건부 연산자) 사용

•   if 구문과 for 루프는 JavaScript 표현식이 아니기 때문에 JSX 내부 자바스크립트 표현식에서는 사용할 수 없다.
• 조건부에 따라 다른 렌더링 시 JSX 주변 코드에서 if문을 사용하거나, {}안에서 삼항 연산자(조건부 연산자)를 사용 한다.

 

4. React DOM은 HTML 어트리뷰트 이름 대신 CamelCase 프로퍼티 명명 규칙을 사용 한다.

카멜 케이스 (Camel Case)

 - 흔히 접하는 표기법. 가장 처음에 오는 문자는 소문자로 표기하고, 각 단어의 첫글자는 대문자로 표기

 - deleteNumber, insertNumer, tabindex는 tabIndex가 된다.(각 단어의 첫글자가 대문자로 표기됨을 보여줌)

 

5. JSX 내에서 주석 사용 방법

React 내에서 주석 처리방법은 javascript와 동일하게 한줄 주석은 //을 이용하고 어려줄은 /* */을 이용합니다.

//console.log("sungmin");

/*
console.log("yoon");
console.log("coding");
*/

JSX내에서는 javascript의 여러줄 주석을 {}로 감싸준 형태로 사용합니다.

{/* <div className = "Yoon"> React JSX</div> */}