[Javascript] React - JSX

React - JSX

JSX

아래의 코드는 js도 아니고, html도 아닙니다. 아래의 문법은 JSX라고 불리는 javaScript의 확장 버전이며 syntqax extension for JavaScript라고 합니다.
콘솔로 아래의 코드를 찍어보면 오류가 납니다. 그렇기 때문에 JSX 문법이 포함되어 있으면 JavaScript로 변환하는 컴파일 과정이 필요합니다.

const Hello = <p>Hello</p>;
console.log(const Hello = <p>Hello</p>)
 // Uncaught SyntaxError: Unexpected token '<'

JSX element

HTML 문법을 JS 코드 내부에서 사용되면 JSX입니다. 변수에 저장이 가능하며, 함수의 인자로 넘길 수 있습니다.

const jongil = {
hoby : <li>프로그래밍</li>,
job : <li>프론트엔드 개발자</li>
};

JSX attribute

태그에 속성(attribute)를 사용하고 싶을 때에는 ""로 감싸줍니다. 속성을 추가하고 싶다면 실제 HTML에서 사용하는 속성명과 다를 수 있으니 공식 문서를 참고해야 합니다. (class --> className)

const jongil = {
hoby : <li>프로그래밍</li>,
job : <li className="cls">프론트엔드 개발자</li>
};

주의!

Self-Closing Tag
JSX에서는 어떤 태그라도 self-closing-tag가 항상 가능합니다. 즉, <input>과 같이 하나의 태그가 요소인 경우 <input/> 처럼 항상 /으로 끝내야 합니다!
또한 최상위 태그가 하나가 되어야 합니다!!

Nested JSX

JSX를 사용하면서 꼭 지켜야할 규칙이 있습니다. 아래의 두가지는 꼭 지켜줍시다!

1. 소괄호로 감싸주기

const Oh = (
<div>
  <p> Hello </p>
</div>
);

2. 항상 하나의 태그로 시작하기
   wrong은 2개의 p 태그로 시작하기 때문에 이렇게 사용하면 안됩니다. right의 방법으로 작성하도록 합시다!

const wrong = (
<p> one </p>
<p> two </p>
);

const right = (
<div>
	<p> one </p>
	<p> two </p>
</div>
);

Rendering

HTML element 또는 React 요소 등 코드가 눈으로 볼 수 있도록 그려지는 것을 렌더링 이라고 합니다. React 요소가 DOM node에 추가되어 화면에 렌더링 되려면 ReactDOM.render 함수를 사용합니다. 첫 번째 인자에는 JSX로 React 요소를 인자로 넘기고, 두 번째 인자는 해당 요소를 렌더하고 싶은 container(부모요소)를 전달합니다.

1. 소괄호로 감싸주기

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