{} jsx에서 에스케이프 하기

jsx 에서 중괄호는 변수나 JS 수식을 담는 것입니다. 그러나 그대로 {}를 표기 해야 할 때가 있습니다. 이때는 다음 처럼 사용합니다.

const MyComponent = () => {
  return (
    <div>
      {"{"} This is a literal curly brace {"}"}
    </div>
  );
};

즉, 또 다른 {" "}로 감싸는 것입니다.

아래는 <div> 와 같은 <>의 경우는 HTML 에서 이미 많이 사용하고 있습니다.

const MyComponent = () => {
  return (
    <div>
      &lt;div&gt;Hello, World!&lt;/div&gt;
    </div>
  );
};