React - JSX

 

 

JSX란?

자바스크립트의 확장 문법이다.

JSX를 왜 사용하는 가?

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

이렇게 작성된 코드를 

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

이런 식으로 코드를 변환된다.

하지만 컴포넌트를 계속 랜더링 할 때마다 JSX 코드를 작성하는 것이 아니라 위에 코드처럼 매번 React.createElement  함수를 사용해야 한다면 매우 불편할 것이다.

그렇기 때문에 JSX가 생겨났고, JSX를 사용하면 매우 편하게 UI를 랜더링 할 수 있다.

 

그렇다면 JSX도 자바스크립트 문법이라고 할수있나?

대답은 NO!

JSX는 리액트로 프로젝트를 개발할 때 사용되는 것이지 공식적인 자바스크립트 문법은 아니다.

 

React에서 사용되는 JSX 표현 정리

const hello = <p>Hello</p>;

위의 코드는 JavaScript 또는 HTML로 보일 수 있지만, 둘 다 해당하지 않는다.

위의 문법은 JSX라고 부르며 syntax extension for JavaScript라고 한다.

HTML과 아주 비슷하게 생겼고 JavaScript 파일 내에서 작성할 수 있는 JavaScript 확장 버전이다.

JSX는 원래 JavaScript 문법이 아니기 때문에, .js 파일 내에 JSX문법이 있으면 해석을 하지 못하고 오류가 난다.

하지만, React에서는 .js 파일 내에이 JSX방식을 쓰면 해석을 하고 오류도 나지 않는다.

 

JSX element

JSX는 HTML 문법을 JavaScript 코드 내부에 쓰는 것이라고 보면 된다.

JSX는 변수에 저장할 수 있고, 함수의 인자로 넘길 수도 있다.

따라서, js 파일 어디에서나 필요한 곳이면 작성이 가능하다.

 

JSX attribute

태그에 attribute(속성)을 주고 싶을 때 항상 ""큰따옴표로 감싸준다.

attribute를 추가하고 싶을 때, 실제 HTML에서 쓰는 속성명이 다를 수 있기 때문에 react 공식 문서를 참고한다.

www.reactjs.org/docs/dom-elements.html#all-supported-html-attributes

DOM Elements – React

예를 들어, 태그에 class 속성을 주고 싶을 때, class이지만 JSX에서는 className을 사용한다. 

또, JSX에서는 어떤 태그라도 self closing tag를 쓸 수 있다. ex) <div>~</div>를 <div /> 이렇게 쓸 수 있다.

 

Nested JSX

1. 소괄호로 감싸기(필수)

const good = (
<div>
    <p>hi</p>
</div>
);

 

2. 항상 하나의 태그로 시작(필수)

오류

// Error!
function App() {
  return (
    <div className="container1">abc</div>
    <div className="container2">abc</div>
  );
}

이렇게 하나의 태그로 감싸 져야 한다.

// Correct!
function App() {
  return (
        <div>
            <div className="container1">abc</div>
            <div className="container2">abc</div>
        </div>
  );
}

 

Rendering

html 요소(element), 또는 React 요소들이 브라우저에 그려지는 것을 렌더링(rendering)이라고 한다.

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

이 코드가 의미하는 것은 index.html 파일에 "App 컴포넌트를 root라는 id를 가진 element에 render하라"라는 의미이다.

index.html 파일 안에 <div id="root"></div> 코드에 렌더링 되는 것이다.