JSX (Javascript syntax extension)

heejung·2022년 2월 28일

목록 보기

4/13

JSX는 자바스크립트에 XML을 추가한 확장 문법이다. 리액트에서는 JSX를 이용해 화면에서 UI가 보이는 모습을 나타내준다.

JSX를 이용하면 자바스크립트(logic)와 HTML구조(markup)를 같이 사용할 수 있으므로, 기본 UI에 데이터가 변하는 것들이나 이벤트들이 처리되는 부분을 더 쉽게 구현할 수 있다.

원래 리액트에서 화면을 그리는 방식

React.createElement API를 사용해서 엘리먼트를 생성한 후 이 엘리먼트를 In-Memory에 저장한다. 그리고 ReactDOM.render 함수를 사용해서 실제 웹 브라우저에 그려준다.

const myelement = React.createElement('h1', {}, 'I do not use JSX!');

ReactDOM.render(myelement, document.getElementById('root'));

JSX는 createElement를 쉽게 사용하기 위해 사용한다. JSX를 사용한 후 그걸 babel이 다시 createElement로 변환한다.

JSX 문법

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

// 잘못된 코드

function hello() {
  return (
    <div>Hello World!</div>
    <div>what are you doing</div>
    )
}

// 올바른 코드

function hello() {
  return <div>
    <div>Hello World!</div>
    <div>what are you doing</div>
    </div>;
}

2. 자바스크립트 표현식

자바스크립트 표현식을 작성하려면 JSX내부에서 코드를 { }로 감싸주면 된다.

function hello() {
  return <div>
    <div>Hello,</div>
    <div>{name}</div>
    </div>;
}

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

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

// 외부에서 if문 사용

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

// 내부에서 삼항 연산자 사용

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