[Describing The UI] JavaScript in JSX with Curly Braces

🍔 Using curly braces: A window into the JS world

---

이전 포스팅에서 언급했듯이 React는 component를 통해 markup과 rendering logic을 결합한다. 그러나 단순히 JSX가 markup만을 나타낼 수 있다면 component의 본 목적을 달성하기 쉽지 않아 보인다.

{ } - Curly Braces가 바로 이 문제에 대한 해답이다. JSX는 curly braces를 통해 markup 내에서 JS를 다룰 수 있다. 다시 말해, dynamic information을 다룰 수 있다.

웹은 전통적으로 HTML, CSS, JS의 결합으로 만들어진다. 각 각 markup, styling, interaction을 담당하며 독립적인 파일에 작성된다.

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

Curly Braces의 간단한 사용 예시이다. 해당 component는 render 시 아래와 같은 markup을 만든다.

<h1>Goonco's To Do List</h1>

• Where to use curly braces

Curly braces는 JSX내에서 딱 2곳에서 사용 가능하다.

1. As text - 위 예시처럼 태그 내의 text에 사용 가능하다.
2. As attributes - src={myUrl} 와 같이 태그에 속성값으로 사용 가능하다.

🍕 Using "double curlies": CSS and other objects in JSX

---

Curly braces 내에는 당연히 JS Object도 전달이 가능하다. 이때 Object는 기본적으로 curly braces를 사용하고 있으므로 double curlies가 JSX내에 발생할 수도 있다.

export default function TodoList() {
  return (
    <ul style={{
      backgroundColor: 'black',
      color: 'pink'
    }}>
      <li>Option 1</li>
      <li>Option 2</li>
      <li>Option 3</li>
    </ul>
  );
}

위와 같이 inline styling이 double curlies의 대표적인 예시가 될 수 있다. ul 태그의 style 속성값으로써 {backgroundColor: 'black', color: 'pink'}을 넘기기 위하여 double curlies를 사용하는 것을 볼 수 있다.

🚨 style 속성값으로 background-color의 camelCase인 backgroundColor를 넘겨주는 것을 알 수 있다. Writing Markup with JSK > The Rules of JSX > camelCase most of the things 참고