[ React ] 시작하기 : 빠르게 시작하기(데이터 표시하기)

JSX를 사용하면 JavaScript에 Markup을 넣을 수 있습니다.

중괄호를 사용하여 JavaScript 변수나 표현식을 JSX 안에 삽입할 수 있으며,

이를 통해 사용자에게 동적으로 데이터를 표시할 수 있습니다.

---

아래의 예시는 user.name을 표시합니다.

return (
    <h1>
        {user.name}
    </h1>
);

JSX 어트리뷰트에서는 문자열을 따옴표로 감싸는 방식 외에도,

중괄호 {}를 사용해 자바스크립트 표현식을 직접 삽입할 수 있습니다.

예를 들어 className="avatar" 는 "avatar" 문자열을 CSS로 전달하지만src={user.imageUrl}는 자바스크립트 user.imageUrl 변수 값을 읽은 다음 해당 값을 src 어트리뷰트로 전달합니다.

return (
    <img
        className="avatar"
        src={user.imageUrl}
    />
);

JSX중괄호 안에 문자열 연결과 같이 더 복잡한 표현식을 넣을 수도 있습니다.

// App.js
const user = {
  name: 'Hedy Lamarr',
  imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
  imageSize: 90,
};

export default function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
      <img
        className="avatar"
        src={user.imageUrl}
        alt={'Photo of ' + user.name}
        style={{
          width: user.imageSize,
          height: user.imageSize
        }}
      />
    </>
  );
}

위의 예시에서 style={{}}은 특별한 문법이 아니라 style={ } JSX 중괄호 안에 있는 일반 {} 객체 입니다.

스타일이 자바스크립트 변수에 의존하는 경우 style 어트리뷰트를 사용할 수 있습니다.