[React] { }사용법 | JS expressions in JSX & ES6 Template Literals

JSX 문법 형태 

앞 포스트에서 말했 듯

자바스크립트 안에 html 문법이 들어갈 수 있도록 하는 것이 JSX 파일이고

React 모듈을 불러와

자바스크립트 안에 있는 html 문법을 찾아내

자바스크립트 문법으로 바꾸는 일을 한다. 

 

또 자바스크립트 안에 있는  html 안에 있는 자바스크립트 문법을 읽는 역할도 한다. 

JS > html > JS 이 들어가 있는 형태. 

 

예를 들면 다음과 같다. 

 

 

 

 

 

HTML 문법 안에 JS 문법 들어가는 예

 

1. <h1> Hello World </h1> 를 프린트 해보자. 

jsx

browser

 

2. 변수로 바꿔 { } 사용하기 

여기서 Hello Jack으로 말하고 싶다면 

변수명을 중괄호로 묶으면 된다. 

html 문법 안에 자바스크립트 문법이 들어가 있는 상황이다.

 

 

3. { } 안 직접 계산도 가능

 

 

 

4. 인풋을 받아서 브라우저에 띄워보기 

 

 

 

 

5. 랜덤으로 번호 알려주기 

 

 

 

{ } 사용시 주의 사항 - html 안 js 문법 사용 

 

1.  {  } 안에 statement는 쓸 수 없다.

{ }안에 expression은 가능하지만 statement는 불가능하다

변수명을 넣어서 그 내용과 교환을 하거나 또는 수학 계산을 하는 등 딱 떨어지는 답은 가능하지만 

if문 등 컴퓨터가 뭔가 하도록 일을 시키는 경우는 { } 안에 내용을 넣을 수 없다.

 

 

 

 

2. { } 갯수에 제한 없음 

이름을 쓰고 싶을 때 아래처럼 쓰는 것보다는 

 

 

 

3. 한 문장 안에  여러 { } 넣는 방법 

방법 1 )

갯수 제한이 없기에 각각 변수 별로 만들어 쓰면 편하다 

 

방법 2 )

ES6 template literals 리쳐럴스

다른 언어에서는 String interpolation이라고 한다.

 

JS 안에 string을 집어넣는 방법이다. 

일단 자바스크립트 {}를 입력한 후 

'(backticks) 사이에 $ 사인을 넣고 또 { } 안에 자바스크립트를 넣는다. 

좀 복잡하다 

 나오는 결과는 같다

 

 

browser

import React from "react";

import ReactDOM from "react-dom";

fName = "Jane";

lName = "Boo";

ReactDOM.render(<h1>Hello {`${fName} ${lName}`}</h1>,

document.getElementById("root")

);

 

 

 

---

 

 

올 해 년도 나오게 하기 

하드 코드 하지말고 매 해 년도가 바뀌도록 해보자.

 

import React from "react";

import ReactDOM from "react-dom";

const name = "Jane";

const currentDate = new Date();

const year = currentDate.getFullYear();

ReactDOM.render(

<div>

<p>Created by {name}</p>

<p>copyright {year}</p>

</div>,

document.getElementById("root")

);

혹시 getFullYear를 바로 결과보려며 ()를 붙여줘야한다. 

<p>Copyright {currentDate.getFullYear()}</p>