[React] JSX

3.1 선릉 우동 맛집 찾아냄

const element = <h1>Hello, world !!</h1>;

오늘은 갑자기 코드 먼저 던졌다.
뒤에 설명하기엔 이만한게 없기에 그랬으니 양해 부탁드립니다.

위에 희한한 태그 문법은 문자열도, HTML도 아니다.

그럼?

이걸 바로 JSX라고 하며 Javascript를 확장한 문법이다. HTMl을 공부하고 사용해 본 사람들은 이걸 굳이 이렇게 쓴다고? 라는 생각을 갖고 있을 수 있겠지만, 이 JSX는 Javascript의 모든 기능이 포함되어 있다. 뒤에서 좀 더 자세하게 예제를 다뤄볼 예정이니 인내심을 갖고 스크롤을 해보자.
(JSX는 UI가 어떻게 생겨야하는지 설명하기 위해 React와 함께 사용할 것 것을 권장한다.)

1. JSX란?

• JSX(Javascript XML)는 Javascript에 XML을 추가한 확장한 문법이다.
• JSX는 React로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다.
• 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.
• JSX는 하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리하다.
• 자바스크립트에서 HTML을 작성하듯이 하기 때문에 가독성이 높고 작성하기 쉽다.

// 실제로 작성한 JSX문법
function App() {
	return (
    	<h1>Hello, React !</h1>
    );
}

// 위와 같이 작성하면, 바벨이 다음과 같이 자바스크립트로 해석하여 준다.
function App() { 
  return React.createElement("h1", null, "Hello, React !"); 
}

2. JSX 문법

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

• Virtual DOM에서 컴포넌트 변화를 감지할 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문이다.

ex) Error Case

// Fail to compile 
// parsing error : adjacent JSX elements be wrapped in an enclosing tag 
// Did you want a JSX fragment <>...</>?
function App() { 
  return (
    <div>Hello</div> 
    <div>GodDaeHee!</div> 
  );
}

ex) Example

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

위와 같이 제일 바깥 <div>로 묶어서 하나의 DOM 트리구조로 이루어져야 한다.

자바스크립트 표현식

• JSX안에서도 자바스크립트 표현식을 사용할 수 있다. 자바스크립트 표현식을 작성하려면 JSX내부에서 코드를 {}로 감싸주면 된다.
• 유효한 모든 Javascript 표현식을 넣을 수 있다.
  Mozilla Javascript 문서

ex) Example Code

function App() {
	const name = "React JSX";
	return (
    	<div>
      		<div>Hello</div>
        	<div>{name}!</div>
      	</div>
    )
}

// Hello React JSX!

삼항 연산자(조건부 연산자) 사용

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

ex) Example Code (외부)

function App() {
	let desc='';
  	const loginYn = 'Y';
  	if(loginYn === 'Y'){
    	desc = <div>회원 입니다.</div>
    } else {
    	desc = <div>비회원 입니다.</div>
    }
  	return (
    	<div>
        	{desc}
        </div>
    )
}

// 회원 입니다.

ex) Example Code (내부)

function App() {
	const loginYn = 'Y';
  	return(
    	<div>
        	<div>
              {loginYn === 'Y' ? (
              	<div>회원 입니다.</div>
              ) : (
              	<div>비회원 입니다.</div>
              )}
        	</div>
        </div>
    )
}

ReactDom은 HTML attribute 대신 camelCase 사용

• JSX 스타일링
  • JSX에서 자바스크립트 문법을 쓰려면 {}를 써야 하기 때문에, 스타일을 적용할 때에도 객체 형태로 넣어줘야한다.
  • 카멜 표기법으로 작성해야한다. (font-size=>fontSize)

ex) Example Code

function App() {
	const style = {
    	backgroundColor: 'blue',
      	fontSize: '24px'
    };
    return (
    	<div style={style}>Hello, React JSX!</div>
    );
}

• class 대신 className
  • 일반 HTMl에서 CSS 클래스를 사용할 때에는 class라는 속성을 사용한다.
    하지만 JSX에서는 class가 아닌 className을 사용한다.

ex) className

function App() {
	const style = {
    	backgroundColor: 'red',
      	fontSize: '12px'
    };
  	return (
    	<div className="testClass">Hello, React JSX!</div>
    )
}

개발자가 JSX를 작성하기만 하면 리액트 엔진은 JSX를 기존 자바스크립토 해석하여 준다.
앞으로 사용할 React에서 많이 보게 될 문법이니 충분히 익히고 React에 뛰어들어도 괜찮을 것 같다.