ES6 : 구조할당(feat.이벤트 값 핸들링)

 

ES6 내용 중 이전에 정리를 했었지만 스스로 제대로 이해를 하지 못하고 있는 거 같아서 다시 한번 내용을 정리해 보려 합니다.

구조 분해 할당이란 배열이나 객체의 값을 원하는 개별 변수에 할당할 수 있습니다.

💡 Before : 배열/객체 데이터를 가져오는 방법

// 배열
let array = ["멍멍이", "냥냥이"];

let name1 = array[0];
let name2 = array[1];

// 객체
const animal = { name: '멍멍이', color: 'white' };

const name = animal.name;
const color = animal.color; 

 

💡 After : destructuring으로 배열/객체 데이터 가져오는 방법

// 배열
let [name1, name2] = ["멍멍이", "냥냥이"];

console.log(name1, name2); // 멍멍이, 냥냥이

// 객체
const animal = { name: '멍멍이', color: 'white' };
const { name, color } = animal; 

 

위의 구조 분해 할당 문법을 이용하면 기본 event 핸들링에서 원하는 값을 쉽게 핸들링할 수 있습니다. 아래의 문법은 event안 curentTarget안에 있는 value의 값을 기존 이름 그대로 value라는 변수를 만드는 거예요.

const {
  currentTarget: { value },
} = event;

 

위의 코드를 응용한다면 아래와 같은 방법으로도 사용할 수 있습니다.

const { value } = event.currentTarget;

 

위의 코드는 우리가 흔히 아는 아래의 문법과 동일합니다. 

const value = event.currentTarget.value

 

처음 예시 코드는  event안 currentTarget안에 있는 값을 가져와야 돼서 currentTarget: 붙은 거예요. 만약에 event 안에 있는 속성만 가져와 변수를 만들려고 한다면 아래와 같이 작성할 수 있습니다.

const { x, y } = event; 

const x = event.x;
const y = event.y;

 

그렇다면 여기서 의문이 생기실 수 있습니다.  우리가 기존에 알던 방식으로 코드를 구현하면 되는데 왜 저렇게 복잡하게 사용을 해야 하지? 생각하며 되물어 보실 수도 있습니다. 
위의 코드 작성 방법은 사실 예시처럼 값을 한개만 만들 때에는 해당 문법의 장점이 없습니다.
그런데 만약 currentTarget안에서 value, tagName, width, id 이 4개를 가져오고 싶다고 하면 기존 문법으로는 아래와 같이 적어야 합니다. 

const value = event.currentTarget.value;
const tagName = event.currentTarget.tagName;
const width = event.currentTarget.width;
const id = event.currentTarget.id;

위의 코드를 ES6 구조분해 문법을 이용하면 아래와 같이 변경할 수 있습니다.

const {
  currentTarget: {value, tagName, width, id}
} = event;

갑자기 코드의 양이 엄청나게 줄은 것을 체감할 수 있습니다. 

두 코드를 비교하니 엄청 코드가 간결해 졌네요. 

 

상황에 맞게 즐겁게 코딩해요~

감사합니다.