구조분해 할당(비구조화 할당) (Destructuring assignment)

 

ES6에서 도입된 문법 중 구조분해 할당(비구조화 할당, 구조 분해)를 이용하면

여러모로 간결하게 코드를 작성할 수 있다.

 

배열

 

const arr = ['가', '나', '다', '라'];

const ga = arr[0];
const na = arr[1];
const da = arr[2];
const ra = arr[3];

 

우리가 배열을 하나 선언하고, 해당 값들을 하나하나 꺼내어

변수로 선언하고, 사용해야한다면 이런 식으로 사용해야한다.

 

ga, na, da, ra를 콘솔에 찍어보면 아래와 같은 결과가 출력될 것이다.

가
나
다
라

 

우리는 위와 같은 코드를 구조분해 할당 문법을 통해서

조금 더 간단하고 간결하게 개별 변수로 선언이 가능하다.

 

const [ ga, na, da, ra ] = ['가', '나', '다', '라'];

 

앞에 [ ga, na, da, ra ] 하고 선언된건 변수의 이름이다.

위에서 선언한 arr를 다시 활용하고 싶다면 당연하게도

 

const [ ga, na, da, ra ] = arr

 

위와 같이 코드를 작성하여도 결과물은 같다.

ga, na, da, ra를 콘솔로 찍어보면 아래와 같은 결과물이 나온다.

 

가
나
다
라

 

 

객체

 

배열뿐만 아니라 객체에도 사용이 가능하다. 

 

const form = {
    name: '난 이름',
    description: '난 설명',
    one: '하나요',
    two: '둘이요'
}

 

이런 임의의 객체가 있다고 생각해보자.

 

우리는 아마 form 객체의 각 값들을 개별 변수로 선언하기 위해 아래와 같은 코드를 작성한 경험이 있다.

 

const formName = form.name;
const formDesc = form.description;
const formOne = form.one;
const formTwo = form.two;

 

배열과 마찬가지로 객체 또한 구조분해 할당을 통해 더 간결하게 개별 변수로 선언이 가능하다.

 

const { name, desctiprion, one, two } = form;

 

이런 식으로 작성하면, 변수의 이름과 동일한 key의 값이 담겨 선언된다.

 

console.log(name); // 난 이름
console.log(desctiprion); // 난 설명

 

그런데 우리가 만약 변수의 이름을 key의 이름과 다르게 하고 싶다면 어떻게 해야할까?

 

// form.name 을 rename 이라는 값에 담고 싶다면
const { name: rename, desctiprion, one, two } = form;

 

이렇게 작성해주면 객체 내 name의 값이 rename이라는 이름의 변수로 선언된다.

 

 

------

 

구조분해 할당을 보다보니까, 어디에서 많이 익숙한 모습이다... 싶었는데

리액트에서 useState를 쓸 때 사용방식이 바로 이 구조분해 할당을 이용한 것이었다.

 

const [ form, setForm ] = useState({ name:'', desc: '' });

 

이렇게 그냥 관성처럼 쓰고 있었는데, 구조분해 할당을 알고나서 띠용해서 공식문서를 찾아보았다.

 

---

useState는 무엇을 반환할까요?

state 변수, 해당 변수를 갱신할 수 있는 함수 이 두 가지 쌍을 반환합니다.

이것이 바로 const [count, setCount] = useState()라고 쓰는 이유입니다.

---

 

그렇다. 이미 써있었던 것이다.

근데 비구조화 할당을 몰라서 저게 대체 뭔소린가~ 하고 넘어갔던 것인데...

그랬구나~ 이제야 알겠다~