구조 분해 할당 (Destructuring)

구조 분해 할당 (Destructuring Assignment)

큰 선물 상자(객체/배열) 속에서 내가 원하는 데이터만 쏙쏙 골라내어 개별 변수에 한 번에 담는 마법 같은 문법입니다. React에서 props나 useState를 다룰 때 숨 쉬듯이 사용하게 됩니다.

데이터 상자 풀기 (객체 & 배열)

이름표(Key)로 꺼내기

객체 구조 분해

const user = { name: "민수" }
const { name } = user;

객체의 Key 이름과 동일한 변수명을 적어주면 값이 알아서 쏙 담깁니다.

순서(Index)로 꺼내기

배열 구조 분해

const rgb = [ "Red", "Green" ]
const [ first ] = rgb;

이름과 상관없이, 배열에 들어있는 순서대로 앞에서부터 꺼내어 변수에 담습니다.

유용한 팁: 변수 이름 바꾸기 (별칭 부여)

객체에서 값을 꺼낼 때 원래의 키(Key) 이름이 아니라 내가 원하는 새로운 변수명(별칭)으로 저장하고 싶다면 콜론(:)을 사용합니다.
const { name: userName } = user;
이렇게 하면 user.name의 값이 userName이라는 새로운 변수에 담기게 됩니다. 주로 외부 API에서 가져온 데이터의 키 이름이 직관적이지 않거나, 현재 스코프의 다른 변수명과 충돌을 피해야 할 때 매우 유용하게 쓰입니다.

const user = { name: "민수", age: 28, job: "개발자" }; // 1. 객체 구조 분해 (Object Destructuring) // 과거의 방식: 객체에서 값을 하나씩 꺼내 변수에 담는 노가다 // const userName = user.name; // const userAge = user.age; // ES6 방식: 객체의 'Key 이름'과 똑같은 이름의 변수로 한 번에 쏙! const { name, age, job } = user; console.log("이름:", name); // "민수" console.log("나이:", age); // 28 // 2. 배열 구조 분해 (Array Destructuring) const colors = ["빨강", "초록", "파랑"]; // 배열은 Key 이름이 없기 때문에, 적어준 '순서대로' 앞에서부터 값이 담깁니다. const [firstColor, secondColor] = colors; console.log("첫 번째 색상:", firstColor); // "빨강" console.log("두 번째 색상:", secondColor); // "초록"