JSX란?

 

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

 

위 문법을 JSX라고 부르며 자바스크립트의 문법 확장입니다. JSX는 실제로 UI가 어떻게 보일지 설명하는데 도움을 줍니다. 또한 JSX는 React의 요소를 만듭니다. React는 JSX사용을 필수로 하지 않지만 대부분의 개발자들은 UI 작업시 시각적으로 도움이 된다고 합니다.

React를 시작하기 전 JSX를 사용해 봅시다.

 

JSX에 표현식 포함하기

 

자바스크립트 표현식을 중괄호로 묶어서 요소에 포함시킬 수 있습니다.

 

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harry',
  lastName: 'Kane'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
    {/* formatName(user)는 javascript 표현식 */}
  </h1>
);

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

 

JSX 또한 표현식이다

 

컴파일이 끝나면 JSX 표현식이 정규 자바스크립트 함수 호출이 되기 때문에 if문이나 for반복 내에서 JSX문법을 사용할 수 있고 변수에 할당, 매개변수 전달, 함수의 리턴 값으로 사용할 수 있습니다.

 

function getGreeting(user) {
 
    let re;
    
    for(let i=0; i<10; i++){
        re += <p>{i}</p>
    }
 
    if (user) {
        return <h1>Hello, {formatName(user)}!</h1>;
    }
    
    return <h1>Hello, Stranger.</h1>;
}

 

JSX 속성 정의

 

태그의 속성에 따옴표를 이용해 문자열 리터럴을 입력할 수 있습니다.

 

const element = <div tabIndex="0"></div>;

 

속성에 중괄호를 이용해 자바스크립트 표현식을 입력할 수 있습니다.

 

const element = <img src={user.avatarUrl}></img>;

 

하지만 아래와 같이 입력할 수 없습니다.

 

const element2 = <img src="{user.avatarUrl}"></img>;
//같이 사용 불가능.

 

JSX 자식 정의

 

태그는 자식을 가질 수 있고 태그가 비어있다면 />로 닫아줘야 합니다.

 

const react1 = <img src={user.element} />;

 

혹은

 

const react2 = <img src={user.element}></img>;

//자식 태그
const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

 

JSX 객체 표현

 

Babel은 JSX를 컴파일 할 때 React.createElement()로 호출합니다.

 

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

//babel 컴파일시 아래와 같이 호출되어 컴파일 된다.

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

 

JSX 소개