Describing the UI - JavaScript in JSX with Curly Braces

JSX는 자바스크립트 파일 안에서 HTML같은 마크업을 하여 렌더링 로직과 콘텐츠를 동일한 위치에 유지할 수 있다. 때때로 약간의 자바스크립트 로직을 추가하거나 마크업 내의 동적 속성을 참조하고 싶을 것이다. 이 경우 JSX에서 중괄호를 사용하여 자바스크립트 창을 열 수 있다.

여기에서 배울 수 있는 것

• 따옴표를 사용한 문자열 전달 방법
• JSX 내부에서 중괄호를 사용하여 자바스크립트 변수를 참조하는 방법
• JSX 내부에서 중괄호를 사용하여 자바스크립트 함수를 호출하는 방법
• JSX 내부에서 중괄호를 사용하여 자바스크립트 객체를 사용하는 방법

Passing strings with quotes

JSX에 문자열 속성을 전달하고 싶을 때 따옴표나 쌍따옴표 안에 넣으면 된다.

//@App.js

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 에 동적으로 텍스트를 전달하고 싶을 때는 어떨까? " 을 {} 으로 대체하여 자바스크립트의 값을 사용할 수 있다.

//@App.js

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"와 아바타라는 자바스크립트 변수의 값을 읽는 src={avatar} 의 차이에 주목하라. 그것은 중괄호를 사용하면 바로 마크업에서 자바스크립트로 작업할 수 있기 때문이다.

Using curly braces: A window into the JavaScript world

JSX는 자바스크립트를 작성하는 특별한 방법이다. 그것은 중괄호 {}를 사용하여 JSX안에서 자바스크립트를 사용할 수 있다는 의미이다. 아래의 예시는 먼저 scientist의 이름을 name이라고 선언한 다음 이를 <h1> 안에 삽입한다.

//@App.js

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

name의 값을 'Gregorio Y. Zara'에서 'Hedy Lamarr'로 바꾼다면 제목이 어떻게 바뀌는가?

formatDate()과 같은 함수를 포함한 어떠한 자바스크립트 표현도 중괄호 사이에서 작동한다.

//@App.js

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

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

문자열, 숫자 그리고 다른 자바스크립트 표현식 이 외에도 객체를 전달할 수도 있다. 객체는 { name: "Hedy Lamarr", inventions: 5 }와 같이 중괄호로 표현한다. 그러므로 자바스크립트 객체를 JSX에 전달하려면 객체를 또 다른 중괄호로 감싸야 한다 : person={{ name: "Hedy Lamarr", inventions: 5 }}

이것은 JSX의 인라인 CSS 스타일에서 볼 수 있다. 리액트는 인라인 스타일을 사용할 필요가 없다.(CSS 클래스들은 대부분의 경우에 적합하다) 그러나 인라인 스타일이 필요할 때, 객체를 스타일 속성으로 전달하면 된다.

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

backgroundColor와 color의 값을 바꾸려고 해봐라. 다음과 같이 쓰면 중괄호 안에 있는 자바스크립트 객체를 볼 수 있을 것이다.

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

다음 번에 {{ 와 }} 를 보면, JSX 괄호 안에 있는 객체에 불과하다는 것을 알 수 있을 것이다.

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

이 예시에서 person 객체는 문자열 name과 객체 theme을 포함한다.

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

컴포넌트는 아래와 같이 person으로부터 값을 사용할 수 있다.

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

JSX는 자바스크립트를 사용하여 데이터와 논리를 구성할 수 있기 때문에 템플릿 언어로 매우 미니멀하다.