Curly Braces in JSX

JavaScript In Your JSX In Your JavaScript

So far, we’ve focused on writing JSX expressions. It’s similar to writing bits of HTML, but inside of a JavaScript file.

In this lesson, we’re going to add something new: regular JavaScript, written inside of a JSX expression, written inside of a JavaScript file.

Whoaaaa…

 

---

당신의 자바스크립트 안에 JSX안에 JS

 

지금까지 우리는 JSX식 작성하는 것에 초점을 맞추었다. 

이것은 약간 HTML작성과 비슷하지만 자바스크립트 안에 있다. 

 

이번 레슨에서는, 우리는 새로운 것을 추가할 예정이다. 

regular JavaScript, written inside of a JSX expression, written inside of a JavaScript file.

 

JS 파일 안에 쓰여진 JSX표현식 안에 쓰여진 일반적인 JS ..... lol

---

Curly Braces in JSX

The code in the last exercise didn’t behave as one might expect.

Instead of adding 2 and 3, it printed out “2 + 3” as a string of text. Why?

This happened because 2 + 3 is located in between <h1> and </h1> tags.

Any code in between the tags of a JSX element will be read as JSX, not as regular JavaScript!

JSX doesn’t add numbers - it reads them as text, just like HTML.

You need a way to write code that says, “Even though I am located in between JSX tags, treat me like ordinary JavaScript and not like JSX.”

You can do this by wrapping your code in curly braces.

 

---

{} in jsx

마지막 활동의 코드는 예상대로 동작하지 않았다. 

2와 3을 더하는 것 (5를 출력하는 것)대신에, 이것은 텍스트의 string으로써 "2+3"를 출력했다. 왜?

 

이것은 2+3 는 <h1>과 </h1>태그 사이에 위치했기 때문이다. 

JSX요소의 태그들 사이에 있는 어떤 코드든지 JSX로써 읽혀질것이다. 일반적인 JS가 아닌!

JSX는 숫자를 더하지 않는다. HTML 처럼 그들을 단지 TEXT로 읽는다.

 

당신은 이렇게 말하는 코드를 작성하는 방법이 필요하다.

"내가 JSX 태그 사이에 있어도, 나를 JSX처럼 취급하지 말고 보통의 자바스크립트처럼 대해줘!" 🙄

 

당신은 {}으로 당신의 코드를 감싸므로써 이것을 할 수 있다. 

 

---

import React from 'react';
import ReactDOM from 'react-dom';

// Write code here:
ReactDOM.render(
  <h1>{2 + 3}</h1>,
  document.getElementById('app')
);  //5

 

 

https://www.codecademy.com/courses/react-101/lessons/react-jsx-advanced/exercises/jsx-curly-braces

| Codecademy