React.js - JSX에서 자바스크립트 문법 사용하기

 

---

JSX에서 javascript 문법 사용

---

 

안녕하세요.

고코더 입니다.

 

 

● 1. JSX는 자바스크립트와 XML이 합쳐진 확장 문법이라고 배웠습니다. 그러므로 JSX에서는 자연스럽게 자바스크립트의 모든 문법을 지원합니다.  

 

● 2. 그러므로 자바스크립트에서 사용하는 제어문인 IF부터 함수를 만드는 function까지 모두 사용이 가능합니다. 예제 소스를 함께 살펴보겠습니다. 

 

function getGuest(user) {
  if (user) {
    return <h1>Hi {user}!</h1>;
  }
  return <h1>HI! Guest</h1>;
}

const element = <h1>{getGuest()}</h1>;
//const element = <h1>{getGuest("GoCoder")}</h1>;

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

1번 라인 : function을 사용합니다. 
2번 라인 : if를 사용합니다. 자바 스크립트 대표적인 문법입니다. 

 

● 3. 결과 화면은 아래와 같습니다. getGuest()라는 함수에 아무 값도 넣지 않았기 때문에 Guest가 표현됩니다.

 

● 4. 하지만 소스에서 이름이 들어간 함수를 호출한다면 결과 값은 아래처럼 표현됩니다.

const element = <h1>{getGuest("GoCoder")}</h1>;

 

● 5. 해당 소스는 코드펜에서 확인 가능합니다. 

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

See the Pen 2. 자바스크립트 문법 사용하기 by GoCoder (@gocoder-net) on CodePen.

 

 

 

---

마무리

---

 

이처럼 JSX 에서는 자바스크립트를 자유자재로 사용이 가능합니다.