[리액트(React) 학습자를 위한 기초지식] 템플릿 리터럴, 구조분해 할당

리액트(React) 학습에 필요한 사전지식

템플릿 리터럴, 구조분해 할당

템플릿 리터럴

이전의 JavaScript에서는 문자열 연결시 연산자 '+' 등을 사용했습니다. 하지만 ES(ECMAScript)6에서 템플릿 리터럴(Template Literal)이라는 새로운 문자열 표기법을 도입했습니다. 보통 문자열로 값을 대입할 때 큰따옴표("")나 작은따옴표('')를 사용했습니다. 하지만 새로 도입된 템플릿 리터럴에서는 큰따옴표나 작은따옴표 대신 백틱문자(``)를 사용합니다. 백틱문자는 키보드에서 숫자1 왼쪽, tab키 위에 위치하고 있습니다.

기존 큰따옴표와 작은따옴표로 문자열을 작성하는 경우 불편한 점은 크게 2가지가 있었습니다. 먼저는 문자열 내에서 큰따옴표와 작은따옴표를 출력하고 싶은 경우 각 따옴표 앞에 백슬래쉬(\)라는 이스케이프 시퀀스(Escape Sequence)를 입력해야 했습니다. 그리고 줄 바꿈을 할 때 줄 바꿈 코드(\n)도 입력해야 했습니다. 하지만 백틱문자를 사용하면 이런 번거로움 없이 입력한 그대로 출력됩니다. 이는 코드를 단순하게 만들어주므로 적극적으로 사용을 권합니다. 또한 리액트용 CSS인 styled-component를 사용하는데 백틱문자를 사용합니다. 참고하시면 될 듯 합니다.

var message = " \"와 백슬래쉬 \n 불편해...\" ";

console.log(message);

/*

"와 백슬래쉬

불편해..."

*/

var message = ` "와 백틱문자

편해..." `;

console.log(message);

/*

"와 백틱문자

편해..."

*/

또한 템플릿 리터럴의 큰 장점 중 하나는 템플릿 리터럴 내부에서는 변수를 사용할 수 있다는 것 입니다. var, let, const로 정의한 값을 ${ }로 불러와 사용할 수 있습니다.

var name = "Jake";

//기존 방법

var message1 = "Hello, My Name is " + name +".";

console.log(message1); //Hello, My Name is Jake.

//템플릿 리터럴 적용

let message2 = `Hello, My name is ${name}`;

console.log(message2); //Hello, My Name is Jake.

const message3 = `${name} says,

"I will use only 'Template Literal'."`;

console.log(message3);

/*

Jake says,

"I will use only 'Template Literal'."

*/

구조분해 할당

구조분해 할당은 배열이나 객체에서 특정 데이터를 뽑아내어 각각 별도의 변수에 저장하는 것을 말합니다. 리액트에서는 UI를 만들 때 표시되는 데이터를 다루는 것이 흔하므로 구조분해 할당을 알아두면 간결하게 코드를 기술할 수 있습니다.

//배열을 각각 변수에 할당

let a, b;

[a, b] = [1, 2];

console.log(a); //1

console.log(b); //2

//정의한 객체에서 해당하는 이름의 변수로 한 번에 할당

const list = {

foo: 1,

bar: 2,

baz: 3

};

const { foo, bar, baz } = list;

console.log(foo); //1

console.log(bar); //2

console.log(baz); //3

리액트에서 보통 구조분해 할당은 render()에서 많이 사용합니다. state값을 불러오려면 'this.state.스테이트명' 이런식으로 불러와야 하는데, 'this.state'를 붙이지 않고 '스테이트명'으로(마치 alias 같이) 작성하기 위해 사용합니다.

constructor(props){

super(props);

this.state = {

foo: 1,

bar: 2,

baz: 3,

}

}

...

//원래는

render(){

return(

<div>

<input type="text" value={this.state.baz} ... />

</div>

);

}

---

//구조분해 할당을 적용하면

render(){

const {foo, bar, baz} = this.state;

return(

<div>

<input type="text" value={baz} ... />

</div>

);

}