[React] JSX

JSX란?

• 자바스크립트의 확장 문법
• 바벨을 통해 일반 자바스크립트 형태의 코드로 변환됨

 

JSX 코드

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

Javascript로 변환된 코드

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

 

JSX의 장점

• 보기 쉽고 익숙하다
• HTML 태그를 사용할 수 있을 뿐 아니라 컴포넌트도 JSX 안에서 작성할 수 있다

 

JSX 문법

• vue.js 처럼 요소들을 부모 요소 하나로 감싸주어야 함
  • Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 하기 때문
  • 보통은 <div></div> 로 감싸나, 리액트 v16 이상부터는 <Fragment></Fragment> 로 감싸줄 수 있다
    이때, Fragment는 태그명 없이 <></>로 사용할 수 있다
• JSX 내부에서 { } 를 이용해 자바 스크립트 표현식을 사용할 수 있음

function App() {
	const name = "홍길동";
	return (
    	<>
        	<h1> {name} 님 안녕하세요 </h1>
        </>
    );
}

• JSX 내부에서는 if 문을 사용할 수 없음
  • JSX 밖에서 if 문을 사용해 사전에 값을 렌더링 하거나, if문에 따라 다르게 JSX를 리턴하는 작업 가능
  • JSX 안에서 사용하기 위해서는 삼항연산자 ( 조건 ? 참 일때 값 : 거짓일 때 값 ) 을 사용
• AND 연산자(&&)를 이용한 조건부 렌더링 가능
  • 조건 && JSX 문 을 이용하면 조건이 참일 때만 JSX 문이 화면에 출력
  • 예외적으로 조건이 0일 경우는 화면에 나타남
• OR 연산자(||) 를 이용해 undefined 값일 때 대체할 문구 지정 가능
• 인라인 스타일링이 필요할 경우, 카멜 표기법으로 작성

function App() {
	const style = {
    	backgroundColor: 'black',
        color: 'white',
        fotsSize: 14px'
    };
    return <div style = {style}> hello </div>;
}

function App(){
	return (
    	<div
         style={{
         	backgroundColor: 'black',
            color: 'white',
            fontSize: 14px
           }}
        >
        	hello
        </div>
    );
}

• class 속성 이용 시, class가 아닌 className 으로 지정해주어야 함
• HTML과 다르게 닫는 태그가 꼭 있어야 함  
• 주석은 {/* */} 와 같은 형식으로 작성 하며, 시작 태그가 여러줄일 경우 그 내부에서 // 와 같은 형태의 주석을 사용할 수 있음