const hi = <p>Hi</p>
JavaScript일까요? HTML일까요? 둘 다 아닙니다.
왜냐하면 JSX는 JavaScript 확장버전입니다. 🙅🏻♀️🙅🏻♀️
HTML과 아주 비슷하게 생겼고 JavaScript 파일 내에서 작성 할 수 있습니다.
한마디로 HTML파일은 더이상 React내에서는 쓰지 않습니다.
HTML 문법을 JavaScript 코드 내부에 써주면 그게 바로 JSX !!
const hi = <p>Hi</p>;
const myFavorite = {
food: <li>샐러드</li>,
animal: <li>dog</li>,
hobby: <li>programming</li>
};
태그에 속성을 주고 싶을 때는 항상 ""
(쌍따옴표)로 감싸줘야 합니다.
또한 이전에는 class
라고 값을 주었지만 React 에서는 className
을 사용해야 합니다.
const hi = <input readOnly={true} />;
const myFavorite = {
food: <li>샐러드</li>,
animal: <li>dog</li>,
hobby: <li className="list-item">programming</li>
};
JSX에서는 어떤 태그라도 self closing tag가 항상 가능합니다.
<input>
과 같이 하나의 태그가 요소인 경우에 <input />
와 같이 항상 /
으로 끝내줘야 합니다.
<div />
= <div></div>
같은표현입니다.
JSX에서는 항상 지켜줘야 하는것이 있습니다.
1_소괄호로 감싸기
const good = (
<div>
<p>hi</p>
</div>
);
중첩된 요소를 만들려면 () 소괄호로 감싸야 합니다!
2_항상 하나의 태그로 시작
const wrong = (
<p>list1</p>
<p>list2</p>
);
위의 태그 방식은 잘못 되었습니다.
제일 처음 요소가 sibling 이면 안됩니다. 무조건 하나의 태그로 감싸져야 합니다.
const right = (
<div>
<p>list1</p>
<p>list2</p>
</div>
);
위 코드 처럼 첫 요소는 하나의 태그로 감싸줘야합니다.
const right = (
<>
<p>list1</p>
<p>list2</p>
</ >
);
하지만 className을 주는 경우가 아니라면 빈태그도 가능합니다.
HTML요소, React요소 등의 코드를 눈으로 볼 수 있도록 그려지는 것을 렌더링이라고 합니다.
React요소가 DOM node에 추가되어 화면에 렌더되려면 ReactDOM.render
함수를 사용합니다.
첫 번째 인자에는 JSX로 React요소를 인자로 넘기고, 두 번째 인자는 해당 요소를 렌더하고 싶은 container(부모요소)를 전달합니다.
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);