diff --git a/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md b/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md
index 6572c23fa..a140fef59 100644
--- a/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md
+++ b/beta/src/pages/learn/javascript-in-jsx-with-curly-braces.md
@@ -1,25 +1,25 @@
---
-title: JavaScript in JSX with Curly Braces
+title: JavaScript에서 중괄호가 있는 JSX
---
-JSX lets you write HTML-like markup inside a JavaScript file, keeping rendering logic and content in the same place. Sometimes you will want to add a little JavaScript logic or reference a dynamic property inside that markup. In this situation, you can use curly braces in your JSX to open a window to JavaScript.
+JSX를 사용하면 JavaScript 파일에 HTML과 비슷한 마크업을 작성하여 렌더링 로직과 콘텐츠를 같은 곳에 놓을 수 있습니다. 때로는 JavaScript 논리를 추가하거나 해당 마크업 내부의 동적인 프로퍼티를 참조하고 싶을 수 있습니다. 이 상황에서는 JSX에서 중괄호를 사용하여 JavaScript를 사용할 수 있습니다.
-* How to pass strings with quotes
-* How to reference a JavaScript variable inside JSX with curly braces
-* How to call a JavaScript function inside JSX with curly braces
-* How to use a JavaScript object inside JSX with curly braces
+* 따옴표로 문자열을 전달하는 방법
+* 중괄호가 있는 JSX 안에서 JavaScript 변수를 참조하는 방법
+* 중괄호가 있는 JSX 안에서 JavaScript 함수를 호출하는 방법
+* 중괄호가 있는 JSX 안에서 JavaScript 객체를 사용하는 방법
-## Passing strings with quotes {/*passing-strings-with-quotes*/}
+## 따옴표로 문자열 전달하기 {/*passing-strings-with-quotes*/}
-When you want to pass a string attribute to JSX, you put it in single or double quotes:
+문자열 어트리뷰트를 JSX에 전달하려면 작은따옴표나 큰따옴표로 묶어야 합니다.
@@ -41,9 +41,9 @@ export default function Avatar() {
-Here, `"https://i.imgur.com/7vQD0fPs.jpg"` and `"Gregorio Y. Zara"` are being passed as strings.
+여기에서는 `"https://i.imgur.com/7vQD0fPs.jpg"`와 `"Gregorio Y. Zara"`가 문자열로 전달되고 있습니다.
-But what if you want to dynamically specify the `src` or `alt` text? You could **use a value from JavaScript by replacing `"` and `"` with `{` and `}`**:
+그러나 `src` 또는 `alt` 텍스트를 동적으로 지정하려면 어떻게 해야 할까요? **`"`와`"`를 `{`와`}`로 바꿔 JavaScript의 값을 사용할 수 있습니다**.
@@ -67,11 +67,11 @@ export default function Avatar() {
-Notice the difference between `className="avatar"`, which specifies an `"avatar"` CSS class name that makes the image round, and `src={avatar}` that reads the value of the JavaScript variable called `avatar`. That's because curly braces let you work with JavaScript right there in your markup!
+이미지를 둥글게 만드는 `"avatar"` CSS 클래스 이름을 지정하는 `className="avatar"`와 `avatar`라는 JavaScript 변수의 값을 읽는 `src={avatar}`의 차이점에 주목해야 합니다. 중괄호를 사용하면 마크업에서 바로 JavaScript를 사용할 수 있기 때문입니다.
-## Using curly braces: A window into the JavaScript world {/*using-curly-braces-a-window-into-the-javascript-world*/}
+## 중괄호 사용하기: JavaScript 세계로 연결하는 창 {/*using-curly-braces-a-window-into-the-javascript-world*/}
-JSX is a special way of writing JavaScript. That means it’s possible to use JavaScript inside it—with curly braces `{ }`. The example below first declares a name for the scientist, `name`, then embeds it with curly braces inside the `
`:
+JSX는 JavaScript를 작성하는 특별한 방법입니다. 중괄호 `{ }` 사이에서 JavaScript를 사용할 수 있습니다. 아래 예시는 이름 `name`을 선언한 다음 `` 내부에 중괄호로 포함합니다.
@@ -86,9 +86,9 @@ export default function TodoList() {
-Try changing `name`'s value from `'Gregorio Y. Zara'` to `'Hedy Lamarr'`. See how the To Do List title changes?
+`name` 값을 `'Gregorio Y. Zara'`에서 `'Hedy Lamarr'`로 변경해 To Do List 제목이 어떻게 변경되는지 확인해봅시다.
-Any JavaScript expression will work between curly braces, including function calls like `formatDate()`:
+`formatDate()`와 같은 함수 호출을 포함해 모든 JavaScript 표현식은 중괄호 사이에서 작동합니다.
@@ -111,18 +111,18 @@ export default function TodoList() {
-### Where to use curly braces {/*where-to-use-curly-braces*/}
+### 중괄호를 사용하는 곳 {/*where-to-use-curly-braces*/}
-You can only use curly braces in two ways inside JSX:
+JSX 안에서 중괄호는 두 가지 방법으로만 사용할 수 있습니다.
-1. **As text** directly inside a JSX tag: `{name}'s To Do List
` works, but `<{tag}>Gregorio Y. Zara's To Do List{tag}>` will not.
-2. **As attributes** immediately following the `=` sign: `src={avatar}` will read the `avatar` variable, but `src="{avatar}"` will pass the string `{avatar}`.
+1. JSX 태그 안의 **문자**: `{name}'s To Do List
`는 작동하지만, `<{tag}>Gregorio Y. Zara's To Do List{tag}>` 작동하지 않습니다.
+2. `=` 바로 뒤에 오는 **어트리뷰트**: `src={avatar}`는 `avatar` 변수를 읽지만 `src="{avatar}"`는 `{avatar}` 문자열을 전달합니다.
-## Using "double curlies": CSS and other objects in JSX {/*using-double-curlies-css-and-other-objects-in-jsx*/}
+## "이중 중괄호 사용하기": JSX의 CSS와 다른 객체 {/*using-double-curlies-css-and-other-objects-in-jsx*/}
-In addition to strings, numbers, and other JavaScript expressions, you can even pass objects in JSX. Objects are also denoted with curly braces, like `{ name: "Hedy Lamarr", inventions: 5 }`. Therefore, to pass a JS object in JSX, you must wrap the object in another pair of curly braces: `person={{ name: "Hedy Lamarr", inventions: 5 }}`.
+문자열, 숫자 및 기타 JavaScript 표현식 외에도 JSX에 객체를 전달할 수도 있습니다. 또한 객체는 `{ name: "Hedy Lamarr", inventions: 5 }`처럼 중괄호로 표시됩니다. 따라서 JSX에서 객체를 전달하려면 `person={{ name: "Hedy Lamarr", inventions: 5 }}`와 같이 다른 중괄호 쌍으로 객체를 감싸야 합니다.
-You may see this with inline CSS styles in JSX. React does not require you to use inline styles (CSS classes work great for most cases). But when you need an inline style, you pass an object to the `style` attribute:
+JSX의 인라인 CSS 스타일에서도 볼 수 있습니다. React는 인라인 스타일을 사용하도록 요구하지 않습니다(CSS 클래스는 대부분 잘 작동합니다). 그러나 인라인 스타일이 필요할 때 `style` 속성에 객체를 전달해야 합니다.
@@ -148,9 +148,9 @@ ul { padding: 20px 20px 20px 40px; margin: 0; }
-Try changing the values of `backgroundColor` and `color`.
+`backgroundColor`와 `color` 값을 변경해 보세요.
-You can really see the JavaScript object inside the curly braces when you write it like this:
+아래와 같이 작성할 때 중괄호 안에 JavaScript 객체를 볼 수 있습니다.
```js {2-5}