---
description: >-
  일단 한번 중괄호 안에 들어가면 변수를 읽기 위해 중괄호를 추가로 넣을 필요가 없다. props를 참조하기 위해 중괄호를 더 쓸 필요도,
  이유도 없는 것이다!
---

# 7. \[React 리팩토링] CSS Inline Styling에 Props 사용하기

* 잘못된 예

```javascript
<li style={{ backgroundColor: {db.backgroundColor} }}
  잘못된 예
</li>
```

* 올바른 예

```javascript
<li style={{ backgroundColor: db.backgroundColor }}
  올바른 예
</li>
```

상위 컴포넌트에서 받아온 데이터를 `props`로 사용하고 싶다면, 일반적으로 자바스크립트 변수를 사용할 때 처럼 `{중괄호}` 안에 넣으면 **안 된다**. 위 두 번째 코드처럼 오히려 _**중괄호 없이 변수를 넣어보면 잘 동작**_&#xD558;는 걸 확인할 수 있다. 왜 그러지?

JSX에서 중괄호가 정확히 언제 쓰이는지 이해하면 그 이유를 알 수 있을 것 같았다.

JSX에서는, 아래 코드처럼 바닐라자바스크립트 표현을 `{ }(중괄호)` 안에 넣을 수 있다.

```
<Star style={...vanilla javascript expression...} />
```

**일단 한번 중괄호 안에 들어가면 변수를 읽기 위해 중괄호를 추가로 넣을 필요가 없다.** props를 참조하기 위해 중괄호를 더 쓸 필요도, 이유도 없는 것이다!

다만 내가 헷갈렸던 이유는 JSX에서 가끔 `{{ ... }}` 이렇게 중괄호를 두 번 사용하는 경우가 있었기 때문인데, 그건 중괄호가 쓰이는 자바스크립트 문법(예를 들면, 객체를 만들 때)을 사용했기 때문에 중괄호가 두 번 들어갔을 뿐이었다.

* **바깥쪽 중괄호** : 이 부분은 JSX가 아니라 자바스크립트라는 의미.
* **안쪽 중괄호** : 자바스크립트 객체를 만들때 사용하는 문법.

➕✅

[스택오버플로우](https://stackoverflow.com/questions/44100147/react-inline-style-not-working-with-props)에서 찾은 자세한 내용을 추가하자면,

첫 번째 중괄호를 만나면 컴파일러는 그 문자가 자바스크립트의 시작을 의미하는 JSX `예약어`임을 알고 있기 때문에, 자바스크립트 객체를 생성하려는 시도를 무효화 시킨다. 그리고 그 내부에서 두 번째 중괄호를 만나면 그 때 객체를 생성하는 것이다. 두 번째로 만난 중괄호는 더이상 예약어가 아니기 때문이다.
