[React] 공식문서 공부 - JSX 알아보기

const element = <h1>Hello, world</h1>;

위 코드와 같은 문법은 문자열도 아니고 HTML도 아닌 JSX문법이라고 합니다.

JSX는 JavaScript XML로 JavaScript에 XML을 확장한 문법입니다.

리액트에서 UI를 나타내기 위해서 사용이 됩니다.

| JSX사용

1. JSX에 변수 넣기

변수를 넣으려면 변수를 중괄호로 감싼 다음 JSX안에서 사용하면 됩니다.

const name = "LEE";
const element = <h1>Hello, {name}</h1>;

2. 태그 속성

따옴표를 이용해 문자열 값을 넣을 수 있습니다.

const element = <a href="https://www.test.com">링크</a>;

중괄호를 사용해 자바스크립트 표현식을 넣을 수 있습니다.

const element = <img src={user.img}></img>;

3. class 지정

일반 HTML과 다르게 className이라고 지정해야 됩니다.

const element = (
  <h1 className="title">
    Hello, world!
  </h1>
);