JSX

---

JS에 XML을 추가해 확장한 문법입니다. 

---

브라우저에서  바벨 을 사용해 실행 전 자바스크립트 형태의 코드로 변환 합니다. 

// 실제 작성할 JSX 예시
function App() {
	return (
      <h1>Hello, good!</h1>
    );
}

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

---

형태

 

1. 부모 요소 가 감싸는 형태여야 합니다.

 

컴포넌트 내부는 DOM 트리 구조로 이루어져 있어야 가상 돔 ( Virtual DOM ) 에서 컴포넌트 변화를 감지 합니다.

ex) 에러 // 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) // 올바를 JSX 트리구조

function App() {
	return (
    		<div>
			<div>Hello</div>
			<div>GodDaeHee!</div>
		</div>
	);
}
// fragment (</>) 로 감싸도 가능합니다.

---

특징 

 

1. 표현식 사용

 

JSX 내부에 중괄호 ( {...} ) 로 감싸서 작성합니다. 

ex) // 표현식 사용법

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

 

if 문과 for 문은 JS 표현식 아니므로 JSX 내부에서 사용할 수 없습니다. 

ex) // 외부에서 사용하는 경우입니다.

function example(){
	const user= "";
    const loginCheck = true;
    if(loginCheck){
    	user= <div> 사용 가능합니다. </div>;
    }else{
    	user= <div> 비회원 입니다. </div>;
    }
    return (
    		<>
            	{user}
            </>
    );

 

내부에서 사용할 경우 삼항 연산자 , And 연산자 ( && ) 그리고  즉시실행함수  를 사용해서 나타냅니다.

ex) // 내부에서 삼항 연사자를 사용할 경우입니다.

function example (){
	const loginCheck = true;
    
    return (
        	<>
                <div>
                    {loginCheck ? ( <div> 사용가능합니다. </div>)
                    : (<div> 비회원 입니다. </div>
                    )}
                </div>
           </>
       );
}

ex) // 내부에서 And 연산자 ( && )를 사용할 경우입니다.

function example (){
    	const loginCheck = true;
        return (
		<>
                   {loginCheck && <div> 사용가능합니다. </div> }
		</>
        );
}

ex) // 내부에서 즉시실행 함수를 사용할 경우입니다.

function example (){
    	const loginCheck = true;
        return (
		<>
          {
          	(()=>{
            	if(loginCheck){
                	return( <div> 사용가능한 유저입니다. </div>);
                }else {
                	return ( <div> 비회원 입니다. </div>);
              	}
            })()
		</>
        );
}

---

 

2. 스타일 적용

 

JSX에서는 중괄호 ( { ... } ) 를 통해 JS 문법을 쓰기 때문에 스타일 적용 시에 객체 형태를 적용해야 합니다.

또한 카멜 표기법 ( camelCase) 를 적용해 작성해야 합니다. 

ex) // css 적용

function App() {
	const style = {
		backgroundColor: 'blue', // 카멜 표기법을 적용하였습니다. //
		fontSize: '0.8em'
	}
	return (
		<div style={style}> example! </div>
	);
}

---

3. className 사용 

JSX 문법은 class 대신 className을 사용합니다. 

ex) // className 사용

function App() {
	const style = {
		backgroundColor: 'red',
		fontSize: '1.2em'
	}
	return (
		<div className="testClass"> good to you </div>
	);
}

---

 

주석 사용

JSX 에서는  {/*…*/} 와 같은 형식으로 주석을 사용 합니다.

ex) // 주석 사용방법

function App() {
	return (
		<>
			{/* 주석사용방법 */}
			<div> example </div>
		</>
	);
}

 

 시작태그가 여러줄일 경우에는, 내부에서 // 의 형식을 사용할 수 있습니다.

ex) // 주석 사용 방법입니다.

function App() {
	return (
		<>
			<div
			// 주석사용방법
			> example </div>
		</>
	);
}

 

 

cf) JSX 없이도 리액트 사용이 가능합니다.   ( 빌드 환경에서 컴파일 설정을 하고 싶지 않을 때 권장)