[JS/React] 기초 문법 복습(2): 분할대입, 디폴트 값, 스프레드, 모듈/번들러

(4) 분할대입

- 분할 대입이란 객체나 배열에 있는 값들을 한번에 대입하기 위한 방식입니다. 

• 배열 분할대입: 키값이 없기 때문에 순서대로 대입됩니다.

const arr = [10,20,30];
console.log(arr[0],arr[1],arr[2]); //10 20 30
const [a,b] = arr; //가장 기본적인 배열 분할대입
console.log(a,b); //10 20

const [first,,third] = arr; //중간 요소 건너뛰기
console.log(first,third); //10 30

const [head,...rest] = arr;
console.log(head,rest); //10 [ 20, 30 ]

• 객체 분할대입: 객체의 프로퍼티를 꺼내서 변수로 만드는 과정으로, 지정된 키값과 이름을 일치하게 넣어주거나 명시해줘야합니다.

const user = {
  name: "공",
  age: 23,
  address: "서울"
}

const name1 = user.name; //원래 프로퍼티를 꺼내는 문법
const age1 = user.age;

const {name, age} = user;
const {name2, age2} = user;
console.log(name, age); //공 23
console.log(name2, age2); //undefined undefined

const {name: name3, age: age3} = user;
console.log(name3, age3); //공 23
//const {age, name} = user;

 

- 이러한 이유로 React에서 사용하는 변수 useState를 객체가 아닌 배열로 분할대입 받아야 됩니다.(useState의 반환값 역시 [state, setState]로 배열입니다.)

const { state: count, setState: setCount } = useState(0);
const { state: text, setState: setText } = useState("")
//실제는 아래처럼 배열로 순서만 맞춰서 선언
const [count, setCount] = useState(0);
const [text, setText] = useState("");

 

+) map, filter

- map(...)이란 배열의 모든 요소를 변환하여 같은 길이의 새 배열로 반환하는 메서드입니다. 원본을 변환하지 않고 값을 반환합니다.

const num = [1,2,3,4];

const doubled = num.map(x=>x*2);
console.log(doubled); //[ 2, 4, 6, 8 ]

-> React에서는 JSX 목록을 렌더링할 때 받아온 객체를 매핑하여 배열로 반환하는 것으로 많이 사용됩니다.

 

- filter(...)란 조건을 통과한 요소만 모아서 더 짧거나 같은 새 배열로 반환하는 메서드입니다.

const num = [1,2,3,4,5,6,7,8,9];

const even = num.filter(x=>x%2===0);
const odd = num.filter(x=>x%2!==0);

console.log(`짝수: ${even}, 홀수: ${odd}`); //짝수: 2,4,6,8, 홀수: 1,3,5,7,9
console.log(even, odd); //[ 2, 4, 6, 8 ] [ 1, 3, 5, 7, 9 ]

-> React에서 항목을 삭제하는 등의 필터링이 필요한 순간에 사용됩니다.

 

(5) 디폴트 값

function greet(name){
  name = name || "손님"
  return `안녕, ${name}`
}

console.log(greet()) //안녕, 손님
console.log(greet(0)) //안녕, 손님
console.log(greet(false)) //안녕, 손님
console.log(greet("")) //안녕, 손님, 자바스크립트에서 빈 문자열은 false

function defaultGreet(name = "손님") {
  return `안녕, ${name}`
}

console.log(defaultGreet()) //안녕, 손님
console.log(defaultGreet(undefined)) //안녕, 손님
console.log(defaultGreet(0)) //안녕, 0
console.log(defaultGreet(false)) //안녕, false
console.log(defaultGreet("")) //안녕,

-> 기존 디폴트 값이 없을 때는 ||을 사용하여 코드를 작성했는데, 이 경우에는 공백, 0, false, ""를 모두 같게 처리했기 때문에 디폴트값을 줘서 undefined만 디폴트값으로 처리될 수 있게 조절할 수 있습니다.

 

(6) 스프레드

- ...(세점)으로 사용되는 문법인 스프레드는 배열이나 객체를 펼쳐서 복사하거나 합치는 문법입니다.

const a = [1,2,3,4];
const b = [5,6,7,8];

const copy_a = a.slice();
console.log(copy_a); //[ 1, 2, 3, 4 ]

const merged_a_b = a.concat(b);
console.log(merged_a_b);
// [
//   1, 2, 3, 4,
//   5, 6, 7, 8
// ]

const spread_a = [...a];
console.log(spread_a); //[ 1, 2, 3, 4 ]
const spread_a_b = [...a,...b,99];
console.log(spread_a_b);
// [
//   1, 2, 3,  4, 5,
//   6, 7, 8, 99
// ]

-> 이전에 slice(), concat()을 통해서 했어야하는 배열복사나 결합을 ...으로 간단하게 복사나 합치기가 가능해진걸 확인할 수 있습니다.

const user = {name: "공구일", age: 23, address: "서울"}
const updated = {...user, age: 29}
console.log(updated) //{ name: '공구일', age: 29, address: '서울' }

const a = {x:1,y:2}
const b = {y:3,z:4}

const merge_ab = {...a,...b}
console.log(merge_ab) //{ x: 1, y: 3, z: 4 }
//겹치는 값은 뒤에 객체 값으로 덮어쓰여짐

-> 객체 내부 값을 변경하거나, 합칠 때 역시 자유롭게 사용이 가능합니다.

 

(7) 모듈/번들러

- 이전에는 <script>태그를 순서대로 나열하며 사용했기 때문에 전역 변수가 서로 덮어쓰여지는 문제가 발생했지만 파일 단위로 스코프를 가지는 모듈단위로 전환하여 export한 것들만 사용할 수 있게 되면서 충돌이 줄어들게 되었습니다.

-> React에서는 component는 default export을 주로 사용하고, util에서는 named export를 주로 사용합니다. 각각의 차이는 import할 때 이름을 자유롭게 지정할 수 있고, 뒤에 경우에는 없는 특징에서 옵니다. 그리고 default는 파일 당 딱 하나만 작성이 가능하지만, named는 여러개 작성이 가능합니다. npm package를 import할 때는 경로없이 이름만 작성하면 번들러가 알아서 node_modules에서 찾습니다.

 

- 번들러란 개발용 코드를 브라우저가 빠르게 실행할 수 있는 형태로 변환해주는 도구로, import를 따라가며 의존성 그래프를 분석합니다. 또, 트랜스파일(jsx를 js로 변환하거나, 최신 문법을 구형 브라우저 호환 문법으로 변환하는 등), 트리쉐이킹(import했지만 실제로는 안 쓰는 코드를 제거), 번들링(말 그대로 수백개의 파일을 묶음), 압축(변수명 단축, 공백,주석등을 제거)하는 등의 일을 합니다.

-> 툴체인 환경인 CRA(Webpack)나 Vite(esbuild 기반 번들러 그 자체)의 경우 모두 이 기능을 포함하고 있습니다.