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

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

• 잘못된 예

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

• 올바른 예

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

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

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

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

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

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

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

• 바깥쪽 중괄호 : 이 부분은 JSX가 아니라 자바스크립트라는 의미.

• 안쪽 중괄호 : 자바스크립트 객체를 만들때 사용하는 문법.

➕✅

스택오버플로우에서 찾은 자세한 내용을 추가하자면,

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