기본적으로 JSX는 자바스크립트의 문법을 확장시킨 것이기 때문에, 모든 자바스크립트 문법을 지원합니다. 그리고 거기에 추가로 XML과 HTML을 섞어서 사용하면 됩니다.

const name = '소플';
const element = <h1>안녕, {name}</h1>;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);

위 코드에서 element를 선언하는 부분의 코드처럼 HTML과 자바스크립트가 섞인 형태로 코드를 작성하면 됩니다. XML/HTML 코드를 사용하다가 중간에 자바스크립트 코드를 사용하고 싶으면 중괄호를 써서 묶어주면 됩니다. {name} 으로 표시된 부분이 바로 name 이라는 자바스크립트 변수를 참조하기 위해서 괄호를 사용한 것입니다. 아래 또 다른 예시 코드를 한 번 볼까요?

function formatName(user) {
    return user.firstName + ' ' + user.lastName;
}

const user = {
    firstName: 'Inje',
    lastName: 'Lee'
};

const element = (
    <h1>
        Hello, {formatUser(user)}
    </h1>
);

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(element);

위 코드에서는 HTML코드 사이에 괄호를 사용해서 변수가 아닌 formatUser() 라는 자바스크립트 함수를 호출하는 것을 볼 수 있습니다. 이런식으로 JSX를 사용할 때 XML/HTML코드 사이에 중괄호를 사용해서 자바스크립트 변수나 함수를 사용하면 됩니다.

function getGreeting(user) {
    if (user) {
        return <h1>Hello, {formatName(user)}!</h1>;
    }
    return <h1>Hello, Stranger.</h1>
}

위 코드는 JSX를 사용해서 사용자 이름에 따라 다른 인삿말을 표시하도록 만든 컴포넌트입니다. 사용자가 존재하면 formatName()이라는 함수를 써서 포맷팅된 이름을 출력하고, 그렇지 않을 경우 Stranger에게 하는 인사말을 출력하게 됩니다.

그렇다면 HTML태그 중간이 아닌 태그의 속성(attribute)에 값을 넣고 싶을때는 어떻게 해야할까요?

큰 따옴표 사이에 문자열을 넣거나,

const element = <div tabIndex="0"></div>;

중괄호 사이에 자바스크립트 코드를 넣으면 됨!

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

위 그림처럼 큰 따옴표 사이에 문자열을 넣거나, 중괄호 사이에 자바스크립트 코드를 넣으면 됩니다. 그래서 JSX에서는 중괄호를 사용하면 무조건 자바스크립트 코드가 들어간다 라고 외워두는게 좋습니다.

그리고 마지막으로 JSX를 사용해서 children을 정의하려면 어떻게 해야할까요? 아래 코드를 한 번 보도록 하겠습니다.

const element = (
    <div>
        <h1>안녕하세요</h1>
        <h2>열심히 리액트를 공부해봅시다!</h2>
    </div>
);

위 코드처럼 우리가 평소에 HTML을 사용하듯이 상위 태그가 하위 태그를 둘러싸도록 하면 자연스럽게 children이 정의됩니다. 여기서 <div>태그의 children은 <h1>태그와 <h2>태그가 되겠죠. 이처럼 가독성도 높으며, 간결하고 직관적으로 코드를 작성할 수 있게 해주는 것이 JSX의 큰 장점이라고 볼 수 있습니다.