3. JSX

1. JSX

지난 글에서도 설명했듯이, jsx는 js를 확장시킨 것이다.
js 상에서 html, css 태그를 쉽게 집어 넣을수가 있는데, 그렇다보니
기존 js와 사용법이 약간 다르다.

1.1 무조건 닫는 태그를 사용해야 한다.

<input/>
<br/>

1.2 jsx 에서는 표현식 - {} 를 사용한다.

중괄호 {} 안에서는 JavaScript 표현식을 사용할 수 있다.
변수, 함수 호출, 삼항 연산자 등을 JSX 코드 안에서 동적으로 처리할 때 사용.

const name = "홍길동";
const formatName = (n) => `이름: ${n}`;

<div>
    <h1>안녕하세요, {name}님!</h1>
    <p>{formatName("김철수")}</p>
    <p>{1 + 2 + 3}</p>
    {true ? <p>참입니다.</p> : <p>거짓입니다.</p>}
</div>

1.3 단일 최상위 요소

// 올바른 예
<div>
    <h1>제목</h1>
    <p>내용</p>
</div>

// 올바른 예 (Fragment 사용)
<>
    <h1>제목</h1>
    <p>내용</p>
</>

// 잘못된 예
<h1>제목</h1>
<p>내용</p>

1.4 HTML 속성 대신 Camel Case : HTML 속성 이름 대신 Camel Case 표기법을 사용한다.

예를 들어, class는 className, tabindex는 tabIndex, onclick은 onClick으로 작성해야 한다.

<div className="container"></div>
<input type="text" tabIndex="0" />
<button onClick={handleClick}>클릭</button>

5. jsx 에서는 주석을 {/* */} 안에 작성해야 한다.