[React] 구조 분해 & 객체 리터럴 & 스프레드 연산자

const { var_name } = object_name;
- 반드시 객체의 필드 이름과 변수의 이름이 같아야 함.
- 중괄호 { } 안에 여러개의 변수가 들어갈 수 있으며, 순서는 상관없음

ex) 객체의 구조분해 할당 예시

(1) 기존 함수 인자에 객체를 받는 방식

(2) 객체 구조분해 후, 인자로 받는 방식

화살표 함수 ({firstname}) => 에서 매개변수가 1개이지만 괄호( ) 생략 불가
- => 함수 body 부분도 아닌데 중괄호 { }만 남게 되므로 오류 발생
{firstname}에서 중괄호{ } 또한 생략 불가
- => 객체 자체를 인자로 받게 됨.

ex 1) 배열의 첫번째 원소만 할당받는 경우

위 경우는 배열의 첫번째 원소만 필요하므로
- 굳이 리스트 매칭(콤마 사용)을 할 필요가 없음
- 그냥 2, 3번째에 해당하는 변수 자리를 비워두면 됨.
- 변수를 나열한 순서대로 할당받는 특성 이용

ex 2) 배열의 세번째 원소만 할당 받는 경우

위 경우는 배열의 세번째 원소만 할당 받고, 1, 2번째 원소는 필요가 없으므로
- '리스트 매칭' (콤마 사용) 을 통해 콤마(,)를 1, 2번째 자리에 연속 사용
- 리스트 매칭을 안하게 되면
  - 변수를 나열한 순서대로 할당받는 특성에 의해 첫번째 원소를 할당 받게 됨.

객체 리터럴
- 중괄호({})를 사용하여 객체를 만드는 것을 의미
  - 리터럴 (literal) : 사람이 이해할 수 있는 문자나 약속된 기호를 사용해 값을 생성하는 표기법
- 속성을 나열할 때는 콤마(,)로 구분

ex 1) 예전 방식의 객체 리터럴

속성과 할당할 변수가 이름이 같아도
- "속성: 변수" 로 표기하는 번거로움 존재
속성으로 함수를 선언할 때, "함수명: function(parameter)" 처럼
- function 키워드를 사용해야하는 번거로움 존재

ex 2) 객체 리터럴 개선

ex 1) 스프레드 연산자 사용 예시

ex 2) reverse( )를 활용한 배열의 구조분해 할당

reverse( ) : 배열 원본의 순서를 반전시키고, 레퍼런스를 반환
- var peaks = ["대청봉", "중청봉", "소청봉"]
- peaks.reverse( ) => peaks == ["소청봉", "중청봉", "대청봉"] (원본 변형)
var [ last ] = peaks.reverse()
- 배열의 구조분해 할당 적용
- 원소의 순서가 반전된 peaks의 첫번째 요소를 last에 할당
  - => 반전시키기 전의 마지막 요소를 할당하는 것과 같은 효과

ex 3) 스프레드 연산자를 통한 배열 복사

var [ last ] = [...peaks].reverse()
- [...peaks] 는 peaks를 복사한 배열
- [ ...peaks]에 reverse( )를 해도 peaks(배열 원본)에 영향을 주지 않음

ex 4) 함수의 매개변수에 스프레드 연산자를 적용

문자열 여러개를 인자로 받는 함수에서 . . .args를 매개변수로 설정하여
args를 인자로 받은 문자열들로 구성된 배열로 설정함
- . . .args == "서울", "수원", "천안", "대전", "대구", "부산"
  - args == [ "서울", "수원", "천안", "대전", "대구", "부산" ]
배열의 구조분해 할당에서도 스프레드 연산자를 사용하여 새로운 배열을 생성
- var [start, ...remaining] = args
  - start: "서울"
  - remaining: [수원, 천안, 대전, 대구, 부산]
var [finish, ...stops] = remaining.reverse()
- remaining: [부산, 대구, 대전, 천안, 수원] // 순서 반전됨
  - finish: "부산"
  - stops: [대구, 대전, 천안, 수원] // 새로운 배열 stops 생성

ex 5) 스프레드 연산자를 통한 객체의 속성을 나열

var backpackingMeals = { ...morning, dinner }
- . . .morning == breakfast: "미역국", lunch: "삼치구이와 보리밥"
객체는 배열과 달리 순서는 중요하지 않음
- var backpackingMeals = { ...morning, dinner } or { dinner, ...morning }

Passionate Engineer