📦 구조분해 할당 (Destructuring)
배열이나 객체에서 값을 “꺼내서 변수에 바로 담는 문법”
아직 제대로 구조분해 할당의 개념을 이해하지 못한 것 같아 다시 정리하면서 공부해보고자 한다.
1️⃣ 배열 구조분해
기본 형태
const arr = [10, 20, 30];
const [a, b, c] = arr;
console.log(a); // 10
console.log(b); // 20👉 순서대로 들어간다 (중요)
일부만 꺼내기
const [a, , c] = [10, 20, 30];
console.log(a); // 10
console.log(c); // 30👉 필요 없는 값은 건너뛸 수 있음
기본값 설정
const [a = 1, b = 2] = [10];
console.log(a); // 10
console.log(b); // 2👉 값이 없을 때만 기본값 사용
여기까지는 기본 구조로 쉽게 이해할 수 있다.
2️⃣ 객체 구조분해
기본 형태
const user = {
name: "Kim",
age: 20,
};
const { name, age } = user;
console.log(name); // Kim👉 key 이름 기준으로 꺼냄 (순서 X)
이걸 조금 더 자세히 보자
원래 데이터는
const user = {
name: "Kim",
age: 20,
};이 상태였다
여기서 user안에 있는 name을 꺼내서 쓰고싶으면
const name = user.name;name이라는 새로운 변수에 user.name을 할당한다
이걸 구조분해로 하면
const { name } = user;
- user 객체를 본다
- 그 안에서 name이라는 key를 찾는다
- 그 값을 꺼낸다
- name이라는 변수에 넣는다
이렇게 된다.
정리하면, “user에서 name을 꺼내서 변수로 만든다”
변수 이름 바꾸기
const { name: userName } = user;
console.log(userName); // Kim👉 name을 userName으로 바꿔서 사용
이것도 해석해보면
- user 객체를 본다
- name이라는 key를 찾는다
- 그 값을 꺼낸다
- userName이라는 변수에 넣는다
이렇게 된다.
3️⃣ 함수에서 구조분해
여기서부터 다시 어려워졌었기에 천천히 해보겠다.
먼저 구조분해 없이 코드를 보면
function printUser(user) {
const name = user.name;
const age = user.age;
console.log(name, age);
}
printUser({ name: "Kim", age: 20 });printUser라는 함수에서 user라는 매개변수로 값을 받는다. 이후 name과 age에 값을 할당한다.
이 과정을 구조분해로 줄여보자
매개변수
user로 객체를 받고 → 그 안에서name,age를 꺼내서 → 각 변수에 값을 할당한다.
이 과정을 줄이면 다음과 같이 작성할 수 있다.
function printUser(user) {
const { name, age } = user;
console.log(name, age);
}이해가 됐다
4️⃣ React에서 왜 사용할까?
React에서는 컴포넌트에 데이터를 전달할 때 props를 사용한다.
예를 들어 다음과 같은 객체가 있다고 하자.
const props = { title: "Hello", count: 1 };❌ 구조분해를 사용하지 않는 경우
console.log(props.title);
console.log(props.count);👉 props.를 계속 붙여야 해서 코드가 길어지고
👉 여러 번 사용할수록 가독성이 떨어진다.
✅ 구조분해를 사용하는 경우
const { title, count } = props;
console.log(title);
console.log(count);👉 필요한 값만 꺼내서 바로 사용할 수 있다.
👉 코드가 짧아지고, 읽기 쉬워진다.
여기까지 이해했으면 React에서 실제로 사용하는 방법을 살펴보자
const MyComponent = ({ title, count }) => {
return <div>{title} - {count}</div>;
};👉 props를 받은 뒤 꺼내는 것이 아니라
👉 매개변수에서 바로 구조분해를 한다
5️⃣ useState에서 구조분해
먼저 useState란?
React에서 useState는 컴포넌트의 상태(state)를 관리하는 함수다.
const [count, setCount] = useState(0);👉 count는 현재 상태 값
👉 setCount는 상태를 변경하는 함수
🧠 그런데 왜 이렇게 생겼을까?
const [count, setCount] = useState(0);이건 사실 구조분해다.
구조분해 없이 살펴보면,
const result = useState(0);👉 useState를 호출하면 배열이 반환된다.
result = [현재값, 상태변경함수];
실제로 풀어보면
const result = useState(0);
const count = result[0];
const setCount = result[1];이걸 줄인 것이 바로
const [count, setCount] = useState(0);🔗 정리
구조분해에 대해 정리해보면서 다시 이해해보았다.
특히 React에서는 props, useState처럼 데이터를 다루는 거의 모든 과정에서 구조분해가 사용된다.
그래도 억지로 암기하고 부딪혔다가 막혀서 다시 이해해보니 훨 이해가 잘되어서 다행이다.
앞으로도 이해하고 잘 사용해보자.
