2. JavaScript Refresher for React (1)

Udemy의 React-The Complete Guide (incl Hooks, React Router, Redux) 강의를 바탕으로 작성된 글입니다.

let과 const

let과 const는 변수를 생성하는 방법입니다.

var는 자바스크립트에서 변수를 생성합니다. 몇몇 변수들은 절대 변하지 않는데 이런 것들을 상수라고 부릅니다. 엄밀히 따지면 그것들은 모두 변수이지만, 자바스크립트에는 var만 있습니다.

ES6에는 두 가지 키워드 let과 const가 있습니다. 물론 var도 있지만, let과 const를 사용할 것을 권장합니다.

let은 새로운 var라고 생각하면 되는데, 변수를 선언할 때 사용합니다. let과 const는 모두 변수들의 범위를 변경하는 것들입니다. 하지만 여기서 가장 중요한 것은, let은 값을 수정할 수 있는 변수를 선언할 때 사용하고 const는 한번 지정하면 절대 변하지 않는 값인 상수를 선언할 때 사용합니다.

var

1
2
3
4
5
var myName = 'Wontory';
console.log(myName);    // Wontory

myName = '조성원';
console.log(myName);    // 조성원

let

1
2
3
4
5
let myName = 'Wontory';
console.log(myName);    // Wontory

myName = '조성원';
console.log(myName);    // 조성원

const

1
2
3
4
5
const myName = 'Wontory';
console.log(myName);    // Wontory

myName = '조성원';    // 오류 발생
console.log(myName);

화살표 함수

자바스크립트 함수를 생성하는 또다른 구문입니다.

일반적인 자바스크립트 함수는 키워드 function을 갖는 모양입니다. var myFnc() = function이라는 구문도 확인할 수 있습니다.

1
2
3
  function myFnc() {
      ...
  }

화살표 함수는 const가 선언되고 오른쪽에는 등호(=)가 있습니다. 몇몇 인수들을 가질 수 있고, 화살표가 있습니다. 뚱뚱한 화살표 =>를 사용하고 그런 다음 {}로 본문을 감싸줍니다. 화살표 함수의 구문은 키워드 function을 생략했기 때문에 일반적인 함수보다 짧습니다. 그리고 자바스크립트에서 갖고 있었던 키워드 this로 인해 생겼던 많은 문제들을 해결해주는 장점을 갖고 있습니다.

1
2
3
  const myFnc = () => {
      ...
  }

자바스크립트로 작업해 본 적이 있다면, 코드를 작성할 때 키워드 this가 항상 우리가 원하는 객체를 참조하지 않는다는 것을 알 것입니다. 화살표 함수 안에 this 키워드를 사용하면, 항상 정의한 객체를 나타내고 실행 중에 갑자기 바뀌지 않습니다.

예제 1

일반적인 자바스크립트 함수

1
2
3
4
5
function printMyName(name) {
    console.log(name);
}

printMyName('Wontory');    // Wontory

화살표 함수

1
2
3
4
5
const printMyName = (name) => {
    console.log(name);
}

printMyName('Wontory');    // Wontory

화살표 함수 (파라미터가 1개일 때)

1
2
3
4
5
6
// 파라미터가 1개라면 괄호 생략 가능
const printMyName = name => {
    console.log(name);
}

printMyName('Wontory');    // Wontory

화살표 함수 (파라미터가 1개가 아닐 때)

1
2
3
4
5
6
7
// 파라미터가 없거나 2개 이상이면 반드시 괄호를 사용
const printMyName = (name, age) => {
    console.log(name, age);
}

printMyName('Wontory', 23);    // Wontory
                               // 23

예제 2

일반적인 화살표 함수

1
2
3
4
5
const multiply = (number) => {
    return number * 2;
}

console.log(multiply(2));

화살표 함수 (본문에 return문 하나만 있을 때)

1
2
3
4
5
// 본문에 return문 하나만 존재한다면 중괄호 생략 가능
// 단, 이 경우 return 키워드는 제거
const multiply = number => number * 2;

console.log(multiply(2));

Exports와 Imports (모듈)

코드를 여러 개의 파일로 분할하여 모듈 방식으로 작성할 수 있습니다.

문장을 내보내고 가져오는 이 모듈이라는 것은 자바스크립트 파일 안에 있는 것으로, 다른 파일에서 컨텐츠를 불러올 수 있고, 자바스크립트 파일은 그 컨텐츠가 어디에서 온 것인지 알 수 있습니다.

person.js

1
2
3
4
5
6
// default 키워드로 export하는 경우
const person = {
    name: 'Max'
}

export default person    // default 키워드로 export

utility.js

1
2
3
// 여러 개를 export하는 경우
export const clean = () => { ... }
export const baseData = 10;

app.js

1
2
3
4
5
6
import person from './person.js'
import prs from './person.js'    // prs이지만 person(default)을 import

import {baseData} from './utility.js'    // named export
import {clean} from './utility.js'   // 특정한 것을 정확히 가리키기 위해 중괄호 사용
import {baseData, clean} from './utility.js'    // 한 문장으로 작성 가능

default 키워드로 export된 것은 어떤 이름으로 import해도 문제없이 작동하지만, named export의 경우에는 파일 안에서 정의된 정확한 이름을 사용해야 합니다. named export된 것을 원하는 이름으로 사용하고 싶을 때는 import문에서 as 키워드를 사용하여 자유롭게 선택할 수 있는 별칭을 할당해야 합니다.

1
import {smth as Smth} from './utility.js'

파일에 다수의 named export가 있는 경우, 특수문자 *을 사용하여 모든 것을 import할 수 있습니다. as 키워드로 별칭을 할당하고, 다른 파일에서 프로퍼티로 내보내는 것이 무엇이든 export하는 것에 접근하기 위해서는 별칭을 사용해야 합니다.

1
2
3
4
import * as bundled from './utility.js'

// bundled.baseData
// bundled.clean