[ 요약 ]

• 따옴표 안의 JSX 어트리뷰트는 문자열 로 전달
• JSX 어트리뷰트를 중괄호 를 이용해 동적으로 지정
• 중괄호를 사용하여 모든 JavaScript 표현식 사용
• 중괄호는 JSX 태그 내부 또는 어트리뷰트의 = 뒤 에서 작동
• 이중 중괄호 {{ }} 는 JSX 중괄호 안에 들어 있는 JavaScript 객체

[ 학습 내용 ]

• 따옴표로 문자열을 전달하는 방법
• 중괄호가 있는 JSX 안에서 JavaScript 변수를 참조하는 방법
• 중괄호가 있는 JSX 안에서 JavaScript 함수를 호출하는 방법
• 중괄호가 있는 JSX 안에서 JavaScript 객체를 사용하는 방법

📘 따옴표로 문자열 전달하기

문자열 어트리뷰트를 JSX에 전달하려면 작은따옴표 나 큰따옴표 로 묶어야함

export default function Avatar() {
  return (
    <img
      className="avatar"
      src="https://i.imgur.com/7vQD0fPs.jpg"
      alt="Gregorio Y. Zara"
    />
  );
}

img의 src와 alt 어트리뷰트를 동적으로 지정하는 법 → 따옴표를 중괄호 {} 로 변환

export default function Avatar() {
  const avatar = 'https://i.imgur.com/7vQD0fPs.jpg';
  const description = 'Gregorio Y. Zara';
  return (
    <img
      className="avatar"
      src={avatar}
      alt={description}
    />
  );
}

📘 중괄호 사용하기: JavaScript 세계로 연결하는 창

중괄호 { } 사이에서 JavaScript를 사용할 수 있음
함수 호출을 포함한 모든 JavaScript 표현식은 중괄호 사이에서 작동

const today = new Date();

function formatDate(date) {
  return new Intl.DateTimeFormat(
    'en-US',
    { weekday: 'long' }
  ).format(date);
}

export default function TodoList() {
  return (
    <h1>To Do List for {formatDate(today)}</h1>
  );
}

📘 중괄호 사용하는 곳

JSX 안에서 중괄호는 두 가지 방법으로만 사용 가능

1. JSX 태그 안의 문자
   <{tag}>Gregorio Y. Zara's To Do List</{tag}>는 작동 ❌
2. = 바로 뒤에 오는 어트리뷰트
   • src={avatar}는 avatar 변수를 읽지만 src="{avatar}"는 "{avatar}" 문자열 전달

📘 이중 중괄호 사용하기: JSX의 CSS와 다른 객체

JSX에는 객체 전달 가능
또한 객체는 { name: "Hedy Lamarr", inventions: 5 } 처럼 중괄호 로 표시
-> JSX에서 객체를 전달하려면 person={{ name: "Hedy Lamarr", inventions: 5 }}와 같이 다른 중괄호 쌍으로 객체를 감싸야함. ex) JSX의 인라인 CSS 스타일
인라인 스타일이 필요할 때 style 어트리뷰트에 객체를 전달해야함

export default function TodoList() {
  return (
    <ul style={{
      backgroundColor: 'black',
      color: 'pink'
    }}>
      <li>Improve the videophone</li>
      <li>Prepare aeronautics lectures</li>
      <li>Work on the alcohol-fuelled engine</li>
    </ul>
  );
}

🚨 주의하세요!

인라인 style 프로퍼티는 캐멀 케이스 로 작성
HTML에서의 <ul style="background-color: black">은 컴포넌트에서 <ul style={{ backgroundColor: 'black' }}> 로 작성

📘 JavaScript 객체와 중괄호에 대해서 더 알아보기

여러 표현식을 하나의 객체로 옮기고 중괄호 안의 JSX에서 참조 가능
person 객체는 name 문자열과 theme 객체를 포함

const person = {
  name: 'Gregorio Y. Zara',
  theme: {
    backgroundColor: 'black',
    color: 'pink'
  }
};

export default function TodoList() {
  return (
    <div style={person.theme}>
      <h1>{person.name}'s Todos</h1>
      <img
        className="avatar"
        src="https://i.imgur.com/7vQD0fPs.jpg"
        alt="Gregorio Y. Zara"
      />
      <ul>
        <li>Improve the videophone</li>
        <li>Prepare aeronautics lectures</li>
        <li>Work on the alcohol-fuelled engine</li>
      </ul>
    </div>
  );
}

JSX : JavaScript를 사용하여 데이터와 논리를 구성할 수 있는 매우 작은 템플릿 언어

https://ko.react.dev/learn/javascript-in-jsx-with-curly-braces