[React] 주요 리터럴 표현

React의 주요 리터럴 표기법.

리터럴? 변수를 저장할 수 있는 값 그자체 또는 코드에서 값을 표현하기 위한 표현.

ES20XX에서 문자열 , 숫자열 , 함수 & 객체 리터럴에 대한 표현 방법 추가.

 

* 템플릿 문자열

문자열 리터럴을 `..` (백쿼트)로 묶어서 표현.

const msg = `Hello, ${fullname}! --줄바꿈 가능 및 변수 삽입 가능

How are you?`;

 

그리고 태그가 붙은 템플릿 문자열 (tag `..`) 구조도 존재

export defulat css``
.panel {
	width: 300px;
}`;

 

* 숫자 구분자

숫자 구분 기호로 '_' (밑줄) 표시. 자바스크립트에선 이미 쉼표가 다른 의미를 가지고 있기에

const value = 123_456_789;

숫자 구분 기호는 가독성을 높이기위한 구조이기에 실행 결과에 영향주지 않으며 방법도 자유롭다. ex) const val = 12_3_4_567

단 자릿수 구분이란 목적에 벗어난 다음같은 건 안됨

const val = 0._987 , 987_; 987__6;

 

* 화살표 함수

함수 리터럴을 보다 쉽게 표현하기 위한 기법

(arg , ...) => { 함수 문구 } - arg : 인수

ex) function AA(radius) { return (radius ** 2) * Math.PI; }

ex) const AA = (radius) => { return (radius ** 2) * Math.PI;; }

const AA = () => console.log("Hello");

 

* 객체 리터럴

1) 변수와 같은 이름의 프로퍼티

프로퍼티와 그 값을 저장하는 변수의 이름이 같으면 값 지정을 생략할 수 있다.

const title = 'exam'; const price = 500;

const book = { title, price };

const book = { title : title, price: price };

 

2) 메서드의 간단한 구문

ES2015 이전에는 메서드로 '프로퍼티 명 : 함수 리터럴' 같이 표현했지만 그 이후엔 method() {...} 같이 더 간단히 표현 가능.

const member = {
	name : 'ABC' ,
    greet: function() {
    	console.log(`Hello, ${this.name}!`); } }
        
const member = {
	name : 'ABC' ,
    greet() {
    	console.log(`Hello, ${this.name}!`); } }

 

3) 프로퍼티 이름 동적 생성

프로퍼티 이름을 괄호로 묶어 표현식 값에 프로퍼티 이름을 생성할수있다. 계산된 프로퍼티 이름이라 한다.

int i=0;
const member = {
	[`attr$(++i): 'ABC' ,
    (`attr$(++i): 'Famail' };