React 6. JavaScript in JSX with curly brace

JSX를 사용하면 JavaScript 파일 내에 html과 같은 마크업을 작성하여 렌더링 로직과 컨텐츠를 동일한 위치에 유지할 수 있습니다. 때로는 약간의 JS 로직을 추가하거나 해당 마크업 내에서 동적 속성을 참조할 수 있습니다.

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

Passing strings with quotes

문자열 속성을 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}
    />
  );
}

이미지를 둥글게 만드는 CSS 클래스 이름을 "avatar" 로 지정하는 className="avatar" 와 {avatar} 라는 JavaScript 변수의 값을 읽어오는 src={avatar} 와의 차이점을 확인해야 합니다. 중괄호를 사용하면 마크업에서 바로 JavaScript로 작업할 수 있기 때문입니다.

Using curly braces: A window into the JavaScript world

JSX는 JavaScript를 작성하는 특별한 방법입니다. 이는 중괄호를 사용하여 내부에서 JavaScript를 사용할 수 있음을 의미 합니다. 아래 예에서는 먼저 이름을 선언한 다음 <h1>안에 중괄호와 함께 삽입합니다.

모든 JavaScript 표현식은 formatDate() 같은 함수도 포함해서 중괄호 안에서 작동합니다.

export default function TodoList() {
  const name = 'Gregorio Y. Zara';
  return (
    <h1>{name}'s To Do List</h1>
  );
}

Where to use curly braces

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}" 를 전달합니다.

Using “double curlies”: CSS and other objects in JSX

추가적으로 문자열, 숫자 및 기타 JavaScript 표현식 외에도 JSX에서 객체를 전달할 수 있습니다. 객체는

{ name: "Hedy Lamarr", inventions: 5 } 와 같이 중괄호로 표시됩니다. 따라서 JSX에서 JS 객체를 전달하려면 객체르 ㄹ또 다른 중괄호 쌍으로 묶어야 합니다. person={{ name: "Hedy Lamarr", inventions: 5 }}

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

Inline style 속성은 카멜케이스로 작성됩니다. 예를 들어, HTML <ul style="background-color: black">은 <ul style={{ backgroundColor: 'black' }}> 와 같이 작성됩니다.

More fun with JavaScript objects and curly braces

여러 표현식을 하나의 객체로 이동하고 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>
  );
}

JSX는 JavaScript를 사용하여 데이터와 로직을 구성하기 때문에 매우 미니멀한 템플릿 언어입니다.