1. JSX, 너 착한 아이구나?
JSX(JavaScript XML)는 JavaScript에 XML/HTML을 추가한 JavaScript 확장 문법이다. 따라서 JavaScript 코드와 XML/HTML을 섞어서 사용하면 된다.
... XML/HTML
{JavaScript 코드}
... XML/HTML
JSX는 createElement 함수에 대한 문법적 설탕을 제공하는 아주 착한 문법이다.
React.createElement(component, props, ...children)JSX를 사용한 것과 바닐라 JS로 코딩했을 때 차이를 보면 확실히 알 수 있다.
// 바닐라 자바스크립트로 createElement 사용
React.createElement('div', null, `Hello, ${name}`);
// JSX 사용
<div>Hello, {name}</div>JSX가 어떻게 JavaScript로 변환되는지 시험해보고 싶다면 온라인 babel 컴파일러를 사용해볼 수 있다.
1-1. 반드시 부모 요소 하나가 감싸는 형태여야 한다!
Virtual DOM에서 컴포넌트 변화를 효율적으로 감지할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다.
1-2. if문 / for문 대신 삼항 연산자(조건부 연산자) 사용해야 한다!
JSX에서 if문 혹은 for문을 사용하면 문제없이 작동하는 것처럼 보이지만 퍼포먼스에 문제가 생기게 된다.
'올바른 리액트 조건부 렌더링' 참조
조건부에 따라 다른 렌더링을 원한다면, 삼항 연산자(ternary operator)나 &&(논리곱)를 사용한다.
1-3. class대신 className
JSX에서는 class가 아닌 className을 사용한다. 참고로 CSS 스타일은 카멜 표기법으로 작성해야 한다(font-size -> fontSize).
2. 태그의 속성(attribute)에 값을 넣는 방법
// 큰따옴표 사이에 문자열을 넣는다
const element = <div tabIndex="0"></div>
// 중괄호 사이에 자바스크립트 코드를 넣는다
const element = <img src={user.avatarUrl} />;3. 자식(children)을 정의하는 방법
HTML태그처럼 상위태그가 하위태그를 감싸도록 하면 자연스럽게 children이 정의된다.
const element = (
<div>
<h1>안녕하세요</h1>
<h2>열심히 리액트를 공부해 봅시다!</h2>
</div>
);4. JSX 내에서 주석 사용 방법
JSX 내에서 {/.../}와 같은 형식으로 사용한다.
여러 줄 주식의 경우 내부에서 // 형식으로 사용한다.
function App() {
return (
<>
<div
// 주석사용
>Hello, world!</div>
</>
);
}