React 공식문서 - JavaScript in JSX with Curly Braces

JSX를 사용하면서 마크업 안에 약간의 JavaScript 로직을 추가하거나 동적 프로퍼티를 참조하고 싶을 때는 중괄호를 사용하여 JavaScript를 사용할 수 있다.

 

Passing strings with quotes(따옴표로 문자열 전달하기)

 

JSX에 문자열 속성을 전달하려면, 작은따옴표 또는 큰따옴표로 묶는다. 이때 동적으로 지정하기 위해서는 작은 따옴표 또는 큰따옴표를 중괄호로 대체하여 JavaScript 값을 사용할 수 있다.

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

 

// 동적으로 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}
    />
  );
}

---

Using curly braces: A window into the JavaScript world(JavaScrpt 세계를 들여다 보는 창)

 

JSX는 JavaScript를 작성하는 특별한 방법으로 중괄호 안에서 JavaScript를 사용할수 있다는 의미이다. 중괄호 안에는 함수 호출을 포함하여 모든 JavaScript 표현식이 작동한다.

---

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. = 기호 바로 뒤에 오는 속성

// avatar라는 변수에 할당된 값을 전달
src={avatar}

// '{avatar}' 이라는 문자열 전달
src="{avatar}"

return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;

---

Using "double culies": CSS and other objects in JS(이중 중괄호 사용: JSX 내에서의 CSS 및 다른 객체)

 

문자열, 숫자, 기타 JavaScript 표현식 외에도 JSX로 객체를 전달할 수 있는데, 이때 다른 중괄호 쌍으로 전달하려는 객체를 감싸야 한다.

(person={{ name : "Hedy Lamarr", inventions: 5 }})

 

React에서는 CSS 클래스가 잘 작동하기 때문에 인라인 스타일을 사용할 필요가 없지만, 인라인 스타일이 필요한 경우에는 style 어트리뷰터에 객체를 전달한다.(이때, 인라인 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>
  );
}

 

---

More fun with JavaScript objects and curly braces(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>
  );
}

 

 

---

* 참고 : React 공식문서(https://react-ko.dev/learn)