[React] JSX 안에서 자바스크립트 사용하기

 

 

따옴표로 문자열 전달하기 

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

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

여기에서 "https://i.imgur.com/7vQD0fPs.jpg"와 "Gregorio Y. Zara"가 문자열로 전달되고 있습니다.

 

위 코드의 src, alt를 동적으로 지정하려면 " 와 "를 { 와 }로 바꿔 JavaScript의 값을 사용할 수 있습니다.

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}
    />
  );
}

 

JSX 안에서 중괄호는 두 가지 방법으로만 사용할 수 있습니다.

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

 

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

JSX에는 문자열, 숫자 및 기타 JavaScript 표현식뿐만 아니라 객체를 전달할 수도 있습니다.

또한 객체는 { name: "Hedy Lamarr", inventions: 5 }처럼 중괄호로 표시됩니다.

JSX에서 객체를 전달하려면 person={{ name: "Hedy Lamarr", inventions: 5 }}와 같이

다른 중괄호 쌍으로 객체를 감싸야합니다.

 

만약 JSX의 인라인 CSS 스타일을 사용한다면 아래와 같이 사용할 수 있습니다.

<ul style={
  {
    backgroundColor: 'black',
    color: 'pink'
  }
}>

위 코드를 살펴보면 중괄호 안에 javaScript 객체를 볼 수 있습니다.

JSX에서 {{ 와 }} 를 본다면 JSX 중괄호 안의 객체에 불과하다는 것을 알아야 합니다.

 

 

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

여러 표현식을 하나의 객체로 옮기고 중괄호 안의 JSX에서 참조할 수 있습니다.

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>
  );
}

위 코드에서 person 객체는 name 문자열과 theme 객체를 포함합니다.

 

컴포넌트는 person값을 아래와 같이 사용하였습니다.

<div style={person.theme}>
  <h1>{person.name}'s Todos</h1>

 

 

Recap

• 따옴표 안의 JSX 어트리뷰트는 문자열로 전달됩니다.
• 중괄호를 사용하면 JavaScript 논리와 변수를 마크업으로 가져올 수 있습니다.
• JSX 태그 내부 또는 어트리뷰트의 = 뒤에서 작동합니다.
• {{ 및 }} 는 특별한 문법이 아닙니다. JSX 중괄호 안에 들어 있는 JavaScript 객체입니다.