구조분해 할당(Destructuring assignment)이란?

구조분해할당

구조화된 배열과 같은 이터러블 또는 객체를 비구조화하여, 1개 이상의 변수에 개별적으로 할당하는 것

배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용함

 

배열

할당 연산자 왼쪽에, 값을 할당받을 변수를 선언해야함. 이때 변수를 배열 리터럴 형태로 선언.

할당 기준: 배열의 인덱스, 즉 순서

 

var arr = [1,2,3];

//구조분해 전
var one = arr[0];
var two = arr[1];
var three = arr[2];

//구조분해 후
const [one, two, three] = arr;

console.log(one, two, three)

 

객체

비구조화하기위해 프로퍼티 키를 사용해야함

객체*의 각 프로퍼티(키, 값)를 객체로부터 추출하여 1개 이상의 변수에 할당

 

*객체

 

왼쪽에 프로퍼티 값을 할당받을 변수를 선언, 오르쪽에 객체 비구조화 할당의 대상(객체)

 

할당 기준: 프로퍼티 키 *순서는 의미 없고, 선언된 변수 이름과 프로퍼티 키가 일치하면 할당됨

var user = { firstName: 'Julie', lastName : 'Lee'};

//구조분해 전
var firstName = user.firstName;
var lastName = user.lastName;

//구조분해 후
const { lastName, firstName } = {firstName: 'Julie', lastName: 'Lee'};

console.log(firstName, lastName);

 

객체의 프로퍼티 키와 다른 변수의 이름으로 프로퍼티 값을 할당 받으려면 아래와 같이 선언

const user = {firstName: 'Julie', lastName: 'Lee'};

const {lastName: ln, firstName:fn } = user;

console.log(fn, ln);//"Julie" "Lee"

 

예제

코드

  const onChange = (event) => {
    const { target: { value }} = event;
    setTweet(value);
  };

value를 쓰기 위해, 구조분해 한 걸 한 번 더 구조 분해함

'event'으로 부터, 즉 event안에 있는 target안에 있는 value를 달라는 의미

//구조분해 전
const {target} = event;
const {value} = target;

//구조분해 후
const { target: { value }} = event;

//다른 방법
const { value } = event.target

 

binding pattern: 

const obj = { a: 1, b: { c: 2 } };
const { a, b: { c: d } } = obj;
// Two variables are bound: `a` and `d`

 

전체코드

import React, { useState } from "react";

const Home = () => {
  const [tweet, setTweet] = useState("");
  const onSubmit = (event) => {
    event.preventDefault();
  };

  const onChange = (event) => {
    const {
      target: { value },
    } = event;
    setTweet(value);
  };

  return (
    <div>
      <form onSubmit={onSubmit}>
        <input
          value={tweet}
          onChange={onChange}
          type="text"
          placeholder="What's on your mind?"
          maxLength={120}
        />
        <input type="submit" value="Tweet" />
      </form>
    </div>
  );
};

export default Home;

 

 

참고

모던 자바스크립트 Deep Dive - YES24