[React] JSX(Javascript Syntax eXtension) 문법

(1). 정의

• JSX(Javascript Syntax eXtension) : Javascript 를 확장한 문법, 리액트 프로젝트를 개발할 때 사용한다.
• Javascript의 공식적인 문법은 아니다.

(2). 장점

• JSX는 하나의 파일에 HTML과 Javascript를 동시에 작성하기에 생산성을 높여준다.
• 그리고 가독성이 좋다는 점과 오류검출이 쉽다는 장점이 있다.

(3). 문법

1. 자바스크립트 표현식을 사용(포함)할 수 있다.

• 자바스크립트 표현식을 작성하면 JSX내부에서 코드를 {}로 감싸면 사용가능하다. 
• {} 이런형태로 변수를 넣는 문법을 데이터 바인딩이라고 한다.

function App() {
	const greeting = 'Hello world';
	return (
    	<div>
          <div className='hello'>{greeting}</div>
        </div>
);

 

2. 반드시 부모요소가 감싸는 형태로 코드를 작성해야한다.

• 안 그러면 일단 빨간색으로 에러가 잔뜩 뜨는 것을 확인할 수 있다. 🤣
• 이유는 Virtual DOM에서 컴포넌트 변화를 감지할 때 효율적 비교를 위해 컴포넌트 내부는
  하나의 DOM트리구조로 만들어져야하는 규칙이 있기 때문에 그렇다.

예시 : 오류코드

function App() {
	return (
		<div>Hello</div>
		<div>I am Error </div>
	);
}

 

예시 : 정상코드

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

 

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

• if문,for문은 Javascript의 표현식이 아니라 JSX에서는 사용할 수 없다고 한다.🤣
• 그래서 JSX 주변코드에서 if문을 사용 또는 {} 삼항연산자를 사용한다.

function App() {
	const test_value = '1';
	return (
    <div>
    	<div>
        	{ test_value === '1' && <div> div태그가 참일경우에만 보인다. </div>}
        </div>
    </div>
  );
}

 

• 그리고 React를 사용하다보면 Wanning 메시지가 뜨는경우가 있는데 불 필요한경우
  /* eslint-disable */ 를 통해 메시지를 끌 수 있다.

4. 기타 React 특징

• html을 축약하는 컴포넌트를 문법을 제공한다.

function Alert(){
  return (
    <div className="Alert">
    <h4>title</h4>
    <p>date</p>
  </div>
  )
}

//let Modal = () =>{} , <modal></modal> 또는 <modal/>

•  의미없는 div 대신 <></>를 사용가능하다.