JSX?

Javascript XML

 

React 혹은 next.js를 시작한다면 처음 마주하는 언어(?)다. 자바스크립트 같으면서 순간 "뭐지"하는 그것이다. JSX 문법을 잠깐 살펴보자.

export default function first() {
  return (
    <>
      <div>하이</div>
      <button>클릭하세요.</button>
    </>
  );
}

자바스크립트 함수를 선언 같아 보인다. 자세히 보면 반환 값으로 HTML이 들어있다. 쉽게 말하면 JSX란 Javascript에 XML문법을 더해 HTML까지 한 번에 작성하는 자바스크립트 확장 문법이다. 물론, 리턴문 안에 HTML 태그처럼 작성하지만 실제 HTML 태그는 아니며 JSX용 HTML이라고 이해하는 게 좋다. 리턴문은 실제 작동에선 babel을 이용해 자바스크립트 형태로 바꾸어 실행한다.

export default function first() {
  return React.createElement(React.Fragment, null, React.createElement("div", null, "\uD558\uC774"), React.createElement("button", null, "\uD074\uB9AD\uD558\uC138\uC694."));
}

 

위 컴파일본을 보면 알겠지만, JSX는 React를 만들면서 Javascript를 확장해 만든 문법임을 알 수 있다(과거 페이스북이 만든 PHP 개량판인 XHP에 그 기원을 두고 있다). 따라서 JSX는 리액트 없이 쓸 수 없고, JSX를 모른다면 리액트를 이용할 수 없다.

 

JSX 기본 틀

JSX 문법을 조금 더 자세히 살펴보자. 먼저, 함수 선언식처럼 선언한다. 이때 자바스크립트에 함수라기보다 export를 기입해 특정 페이지를 뜻한다고 이해하는게 좋다. 1번 자리에는 우리가 아는 특정 기능을 가진 자바스크립트를 작성해 넣는다. 그리고 리턴(2번)에는 JSX에서 쓰이는 HTML스러운 태그를 활용해 브라우저에 그릴 화면을 디자인한다.

HTML과 차이점

JSX를 배우기 편한 이유이자, 사용 시 은근히 헷갈리는 부분이 바로 HTML과 유사함이다. 무엇이 다른지 같은 듯 다른지 차이점 3가지를 살펴보자.

 

1. 따옴표와 중괄호

JSX(왼쪽)과 HTML(오른쪽)

onclick 이벤트가 발생하는 버튼을 보자. HTML은 onclick 다음 태그처럼 큰따옴표로 함수를 실행시킨다. 반면, JSX는 중괄호를 사용한다.

 

2. 카멜 표기법 (Camel case)

눈치빠른 사람이라면 onclick에서도 다른 점을 느꼈을테다. JSX는 언더바 대신 중간단어를 대문자로 사용하는 네이밍컨벤션인 카멜 표기법을 적극적으로 이용한다. 이는 속성을 설정할 때도 알 수 있다. HTML에서는 onclick, JSX에서는 onClick으로 사용한다. 

 

3. class와 className

export default function third() {
  function HandleClick() {
    alert("잘했어요!");
  }

  return (
    <>
      <div className="hi">하이</div> // <- className
      <button onClick={HandleClick}>클릭하세요.</button>
    </>
  );
}

리액트에서는 자바스크립트를 확장한 문법인 만큼 class가 존재한다. 따라서 태그에서 사용하는 class를 그대로 사용할 경우 예약어 충돌이 일어난다. JSX에서 태그 안에 class를 사용할 경우 className으로 사용해야한다.

 

 

결론

JSX가 나온 이유는 자바스크립트를 편하게 쓰기 위해서다(정확히 말하면 리액트다). 자바스크립트를 편하게 사용하고자 리액트를 개발했고, 이 리액트를 편하게 사용하기 위한 문법이 JSX다. JSX는 한 파일에 HTML, CSS, Javacript 모두 작성할 수 있어 직관적이고, 개발자가 읽기 편하다. 더불어 JSX 하나로 UI, 기능 등 모두 모듈화할 수 있어 재사용성도 높다. 특히 react-hooks을 이용한다면 바닐라 JS 대비 조금 더 효율 높은 코딩이 가능하다. 사실, JSX는 리액트에서 시작한 언어인 만큼 리액트의 특징이라고도 볼 수 있다. 

[React] JSX 이해하기

[React] JSX 소개

React.js Conf 2015 Keynote - Introducing React Native

※ 잘못된 내용이 있을 경우 댓글로 알려주세요. 배우고 익히고 수정하겠습니다:)