React.js - JSX에서 자바스크립트를 사용하는 방법 / 중괄호{}

---

JSX에서 JavaScript 를 사용하기

---

 

안녕하세요.

고코더 입니다.

 

 

● 1. JSX에 대해 알아보았습니다. 자바스크립트와 XML 합성어로 만들어진 단어인 만큼 당연히 JSX에서는 스크립트를 사용할 수 있습니다. 하지만 규칙이 있고 방법은 어려운 부분은 아닙니다. 간단한 예제를 통해서 쉽게 학습할 수 있습니다.

 

● 2. JSX 태그안에서 중괄호 "{}"는 자바스립트를 사용할 수 있도록 합니다. 

일종의 약속입니다. 이 부분만 안다면 자바스크립트를 원하는 곳에 자연스럽게 입력할 수 있습니다. 예제를 한번 살펴보겠습니다. 

 

● 3. 스크립트 영역에서 name 이라는 변수에 "GoCoder"라는 텍스트를 입력하고 이를 element안에 변수를 함께 넣어서 문자열을 만들었습니다. 자바스크립트를 JSX 태그 안에 입력한 것입니다. 즉 다시 말하면 자바스크립트를 중괄호를 열어 그 안에 입력하면 사용이 가능합니다. ex) {자바스크립트}

const name = 'GoCoder'; /* 변수 생성 */
const element = <h1>Hi! {name}</h1>;/* 변수 입력 */

ReactDOM.render(
  element,
  document.getElementById('root')
);

 

 

● 4. 그러면 결과 값은 어떻게 나올까요? 네 바로 "Hi! GoCoder"라고 생성됩니다. 

 

● 5. 함께 실습한 소스는 제 코드펜에서 확인이 가능합니다. 코드펜으로 쉽게 실습을 따라 해 보세요.

https://codepen.io/gocoder-net/pen/gOwEvaj

See the Pen JSX - in JavaScript by GoCoder (@gocoder-net) on CodePen.

 

 

---

마무리

---

 

{중괄호} 안에 자바스크립트 있다.