React를 위한 Javascript

변수 선언하기

ES2015 이후 더 나은 기능을 제공하는 변수 선언 방법이 추가되었다.

1.1 const 키워드

상수[contant]는 변경할 수 없는 변수이다. 일단 선언하고 나면 상수로 선언된 변수의 값을 변경할 수는 없다. 실제로 React를 사용하다보면 선언된 변수의 값을 변경하면 안되는 경우가 많다.

// ES2015 이전
var pizza = true;
pizza = false;
console.log(pizza); // fasle => 변수에 재할당 가능

// ES6 이후
const icecream = true;
icecream = false; // TypeError: Assignment to constant variable. => 상수 변경 시도

1.2 let 키워드

Javascript도 이제는 구문적인 변수 영역 규칙[lexical variable scoping]을 지원한다. 중괄호({ })를 사용하여 코드 블록을 만들고 함수의 경우에는 이런 코드 블록이 별도의 변수 영역을 이룬다. 하지만, var키워드를 이용한 변수 선언은 다르다. 해당 블록 안에서 변수를 새로 만들면, 그 변수의 영역이 그 블록 안으로만 한정되지 않는다.

var topic = "자바스크립트";
if (topic) {
  var topic = "리액트";
  console.log("블록", topic); // 블록 리액트
}

console.log("글로벌", topic); // 글로벌 리액트

/////////////////////////////////////////////////////

let topic = "자바스크립트";
if (topic) {
  let topic = "리액트";
  console.log("블록", topic); // 블록 리액트
}

console.log("글로벌", topic); // 글로벌 자바스크립트

1.3 템플릿 문자열

템플릿 문자열[template string]을 문자열 연결[concatenation] 대신 사용할 수 있다. 템플릿 문자열을 이용하여 문자열 중간에 변수를 삽입할 수도 있다.

const firstName = "John";
const middleName = "Paul";
const lastName = "Smith";

// ES2015 (문자열 연결 방식)
console.log(lastName + ", " + firstName + " " + middleName); // Smith, John Paul

// ES6 (템플릿 리터럴 방식)
console.log(`${lastName}, ${firstName} ${middleName}`); // Smith, John Paul

예전에는 HTML 문자열을 자바스크립트에서 직접 사용하려면 모든 문자열을 +로 연결하면서 한 줄로 처리해야 했기 때문에 쉽지 않았다. 아래 예시를 보며 차이를 보자

// ES6
document.body.innerHTML = `
<section>
    <header>
        <h1>The HTML5 Blog</h1>
    </header>
    <article>
        <h2>${article.title}</h2>
        ${article.body}
    </article>
    <footer>
        <p>copyright ${new Date().getYear()} ¦ The HTML5 Blog</p>
    </footer>
</section>
`;

/////////////////////////////////////////////////////

//ES2015
document.body.innerHTML =
  '<section>\\n' +
    '  <header>\\n' +
    '    <h1>The HTML5 Blog</h1>\\n' +
    '  </header>\\n' +
    '  <article>\\n' +
    '    <h2>' + article.title + '</h2>\\n' +
    '    ' + article.body + '\\n' +
    '  </article>\\n' +
    '  <footer>\\n' +
    '    <p>copyright ' + new Date().getYear() + ' | The HTML5 Blog</p>\\n' +
    '  </footer>\\n' +
  '</section>';

Javascript 시작을 백틱으로 시작했는데, 지금와서 보면 템플릿 리터럴은 좋은 친구인 것 같다.