JSX
const hi = <p>HI</p>;위의 코드는 JavaScript, HTML 둘 다 아니다. 위의 문법은 JSX(Javascript Syntax Extension) 라고 불리는 JavaScript 확장 버전이다.
HTML 과 아주 비슷하게 생겼고 JavaScript 파일 내에서 작성할 수 있다. JSX 는 원래의 JavaScript 문법이 아니기 떄문에 .js 파일 내에 JSX 문법이 있으면 브라우저에서 해석하지 못해 문법 오류가 발생한다.
React.js 를 사용하기 위해 JSX 문법이 포함되어 있으면, 해당 파일을 정규 JavaScript 문법으로 변환시키는 컴파일 과정이 필요하다.
JSX element
HTML 문법을 JavaScript 코드 내부에 써주면 그것이 JSX이다. .js 파일 어디에서나 필요한 곳에 작성하면 된다. 변수에 저장할 수 있고, 함수의 인자로 넘길 수도 있다.
const hi = <p>Hit</p>;
const myFavorite = {
food: <li>샐러드</li>,
animal: <li>dog</li>,
hobby: <li>programming</li>,
};JSX attribute
태그에 attribute(속성)을 주고 싶을 때는 항상 쌍따옴표("") 로 감싸주어야 한다. 실제 HTML 에서 쓰는 attribute name(속성명)과 다를 수 있으니 react 공식 문서를 참고해서 사용해야 한다.
예를 들어 class 를 주고 싶을 땐 class 대신 className 을 사용해야 한다.
const hi = <input readOnly={true} />;
const myFavorite = {
food: <li>샐러드</li>,
animal: <li>dog</li>,
hobby: <li className="list-item">programming</li>,
};Self-Closing Tag
JSX 에서는 어떤 태그도 self closing 이 가능하다.
<input> 과 같이 하나의 태그가 요소인 경우에는 <input /> 과 같이 항상 / 으로 끝내줘야 한다. <div /> 와 <div></div> 는 같은 표현이다.
Nested JSX
- (필수) 소괄호로 감싸기 : 중첩된 요소를 만드려면 소괄호(
())로 감싸주어야 한다.
const good = (
<div>
<p>hi</p>
</div>
);- (필수) 항상 하나의 태그로 시작 : 제일 처음 요소가 sibling 이면 안 된다. 무조건 하나의 태그로 감싸져야 한다.
// bad
const wrong = (
<p>list1</p><p>list2</p>
);
// good
const right = (
<div>
<p>list1</p>
<p>list2</p>
</div>
);Rendering
html 요소(element), 또는 React 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것을 렌더링(rendering) 이라고 한다.
React 요소가 DOM node 에 추가되어 화면에 렌더되려면 ReactDOM.render 함수를 사용한다. 첫 번째 인자에는 JSX 로 React 요소를 인자로 넘기고, 두 번째 인자는 해당 요소를 렌더하고 싶은 container(부모요소)를 전달한다.
ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('root'));