Destructuring, import/export

1. Destructuring, 구조 분해

• 디스트럭쳐링이란 배열이나 오브젝트에 있는 값들을 분해하여 각각의 변수에 할당하는 것을 말한다.
• 원소가 3개 짜리인 배열이라면 각각의 원소를 변수로 담는 것이 어렵지 않지만 개수가 100개, 1000개가 넘을 경우 일일이 지정하는 것은 여간 복잡한 일이 아니다.

var arr = [2,3,4];
// 직접 지정하기
var a = arr[0];
var b = arr[1];
var c = arr[2];
// Destructuring
var [a,b,c] = [2,3,4];
// or
var [a,b,c] = arr

var [a,b,c=10] = [2,3]; a = 2, b = 3, c = 10
var [a,b,c=10] = []; // a,b undefined

• Destructuring을 사용할 경우, 값이 담을 변수를 해당 객체와 같은 구조로 만들면 된다. 위에서는 배열이므로 [ ] 를 사용하였다.
• 만약 개수가 같지 않을 경우, default 값을 설정할 수 있다. 설정하지 않으면 undefined가 할당된다.

var obj = { name : 'Kim', age : 30 };
var {name,age} = { name : 'Kim', age : 30 }; // name = 'Kim', age = 30
var {name, age = 31} = { name : 'Kim' };

var {name : 이름 } = { name : 'Kim'}; // 이름 = 'Kim', name을 기준으로 '이름'과 'Kim'이 매칭됨
var {name : 이름 = 'Park'} = { }; // default 값 설정

• 오브젝트의 경우에도 담을 변수를 { }로 작성한다. 다만 이때 변수의 이름은 실제 해당 객체의 key 값과 같아야 한다.
  • 만약 담을 변수의 이름을 바꿔야 한다면 해당 변수를 매칭시켜서 작명한다. 단, 담겨지는 변수의 이름은 key 값과 같아야 한다.

var name = 'Kim';
var age = 30;

var obj = { name : name, age : age}; // 흔한 방법, name이라는 이름에 name 변수 값을 할당한다.
var obj = { name, age } // key와 value 변수가 같으면 하나로 생략 가능
// obj = { name : 'Kim', age : 30 }

• 반대로 특정 변수를 오브젝트에 추가하는 경우엔 해당 key에 변수를 매칭시킨다. 이 때 key 와 변수의 이름이 같다면 하나만 작성해도 된다.

var obj = { name : 'Kim', age : 30};
    
    function 함수({name, age}){
        console.log(name);
        console.log(age);
    }

    함수(obj); // 1-Kim, 2-30
    
 function 함수([first, second]){
        console.log(first);
        console.log(second);
    }

    함수([1,2]); // 1-1, 2-2

• 함수 파라미터로 오브젝트나 배열을 받을 경우에도 destructuring을 사용한다.
  • 오브젝트일 경우 {}, 배열일 경우 []
  • 함수의 파라미터는 함수 내에 또 다른 변수를 선언하는 것과 같으므로 destructuring을 통해 선언된 변수들은 해당 구조와 순서에 맞게 값이 전달된다.

    let 신체정보 = {
        body: {
            height: 190,
            weight: 70
        },
        size: ["상의 Large", "바지 30인치"],
    };
    
 // destructuring을 하기 위해서는 담는 변수의 구조를 담을 값의 구조와 맞춰주면 된다. 
    let {
        body:{
            height : 키,  // 변수명을 바꾸고 싶은 경우에는 이렇게 적기
            weight : 몸무게
        },
        size : [상의사이즈,하의사이즈]
    } = 신체정보;

• 오브젝트의 값들 가져오는 경우, 대상 객체와 구조를 같게 작성한다. 이 때는 key 값만 적으며, 이름을 같게 해준다.
  • 변경하려면 ' : ' 으로 작명
• 배열의 경우 각각 상의사이즈, 하의사이즈 변수가 신체정보의 size 배열과 매칭된다.

2. import/export

• 외부의 js 모듈을 가져올 경우 스크립트 태그를 사용하여 불러온다. 그 외에 모듈을 불러오는 방법으로는 react나 vue 등에서 사용하는 방법이 있다. import와 export를 사용한다.

// 외부모듈 이름 : library.js
// 옛날 문법
    var importing = require('/library.js');
    
 // es6 문법 : 모든 파일을 가져오지 않고, 특정 변수만 가져온다.
 // 형식은 : import '가져올 내용' from '경로'
 import a from '/library.js'

• import를 하기 위해선 외부 모듈에서 export를 해주어야 한다. export 방법으로는 크게 두 가지가 있다.
  1. export default x : 특정 변수를 내보내며, 외부에서 import 할 시 변수 이름을 변경할 수 있다. 하나의 변수만 내보낼 수 있고, 한 번만 사용할 수 있다.
  2. export {x,y,...} : 여러 변수를 내보낼 수 있으며, 외부에서 import 할 시 변수 이름을 변경해서는 안된다. 또한 export 시 { } 안에 담아서 보낸다.

// library.js
var a = 10;
var b = 20;
var c = 30;

export default c; // a를 내보냄
export {a,b} // a와 b를 내보냄, 하나만 내보낼 수도 있음

// main.js
import x from 'library.js' // default로 보낸 값은 변수 이름 맘대로 작성 가능
import {a,b} from 'library.js' // 그냥 보낸 값들은 변수 이름을 같게 작성해야 함.
import c, {a,b} from 'library.js' // 동시에 가져오려면 default로 가져오는 걸 먼저 작성함.

• 가져올 때 변수명을 다르게 쓰고 싶으면 as를 사용한다.

// library.js
var a = 10;
var b = 20;
var c = 30;

export default c;
export {a,b}

// main.js
import c as C, {a as A, b as B} from 'library.js'

• 데이터를 전부 가져와 사용하려면 *을 사용한다. 다만, 가져올 때는 as 를 통해 작명해야 한다.
• 또한 default로 내보낸 값은 사용할 수 없으며, 가져오려면 추가로 밑에 작성해야 한다.

// library.js
var a = 10;
var b = 20;
var c = 30;

export default c; // a를 내보냄
export {a,b} // a와 b를 내보냄, 하나만 내보낼 수도 있음

// main.js
import c, {* as 모두} from 'library.js'; // c는 default로 내보냈으므로 따로 작성, *에 포함 안됨

console.log(모두.a); // 10
console.log(모두.b); // 20
console.log(c); // 30

 

 

자료 출처 : https://codingapple.com/

코딩애플 온라인 강좌 - 개발자도 단기완성!