프론트엔드 개발을 하다 보면 코드 리뷰에서 이런 말을 자주 듣게 됩니다.
“이거 구조분해 안 했어?”
“props에서 구조분해 해주세요”
“store 값 구조분해해서 써주세요”
그렇다면 이 구조분해란 정확히 무엇일까요?
그리고 왜 쓰는 게 좋고, 언제 쓰면 오히려 독이 되는 걸까요?
실전 예시와 함께 정리된 구조분해 가이드를 알려드릴게요.
✅ 구조분해란?
JavaScript(또는 TypeScript)에서 객체나 배열의 값을 개별 변수로 뽑아내는 문법입니다.
const user = { name: '연지', age: 26 };
// 구조분해 없이
const name = user.name;
const age = user.age;
// 구조분해로
const { name, age } = user;⭐ 구조분해의 장점
| 항목 | 설명 |
|---|---|
| ✅ 코드 간결성 | obj.a 대신 a로 바로 접근 가능 |
| ✅ 가독성 향상 | 필요한 값만 명확하게 추출 |
| ✅ 반복 제거 | props.xxx, store.xxx 등 중복 방지 |
| ✅ 함수 인자 간결화 | 매개변수에서 바로 구조분해 가능 |
| ✅ 코드 구조 명확화 | 어떤 값이 필요한지 선언적으로 보여줌 |
예시: props에서 구조분해
// 구조분해 X
function Profile(props: { name: string; age: number }) {
return <div>{props.name} ({props.age})</div>;
}
// 구조분해 O
function Profile({ name, age }: { name: string; age: number }) {
return <div>{name} ({age})</div>;
}
🎯 구조분해가 유용한 경우
1. props, context, hook 등에서 여러 값을 가져올 때
const { t } = useTranslation();
const { userProfile } = useUserStore();2. API 응답, 상태값 등을 가독성 있게 분리할 때
const { data, error } = await fetchData()3. 컴포넌트 매개변수에서 바로 속성 꺼낼 때
const MyButton = ({ label, onClick }: ButtonProps) => (
<button onClick={onClick}>{label}</button>
);⚠️ 구조분해를 피해야 할 경우 (예외 케이스)
1. 중첩된 객체를 깊게 구조분해할 때
// ❌ 너무 깊은 구조분해
const { a: { b: { c, d } } } = obj;
// ✅ Optional chaining으로 접근하는 것이 더 명확
const c = obj?.a?.b?.c;
2. 필드가 너무 많을 때 (ex. props 10개 이상)
// ❌ 너무 많은 변수 풀림
const { a, b, c, d, e, f, g, h, i, j } = props;→ 이럴 땐 필요한 것만 부분 구조분해하거나, 그냥 props.xxx로 접근
3. 변수명이 충돌할 수 있는 경우
const { name } = user;
const name = '내 이름'; // 💥 충돌→ 구조분해 시 변수명을 바꿔주는 것이 안전
const { name: userName } = user;4. 단일 값만 필요할 때
// ❌ 굳이 구조분해할 필요 없음
const { title } = post;
console.log(post.title);
// ✅ 그냥 post.title로 사용하는 게 더 직관적일 수도 있음5. 로깅이나 디버깅 시
전체 객체를 로그로 보고 싶을 때는 구조분해하지 말고 객체 통째로 넘기는 것이 낫습니다.
console.log(user); // 전체 구조 확인 가능🧠 구조분해를 쓸지 말지 결정하는 기준
| 상황 | 구조분해 사용 |
|---|---|
| 필요한 속성이 여러 개일 때 | ✅ |
props.xxx, store.xxx 반복될 때 | ✅ |
| 깊은 중첩 구조일 때 | ❌ |
| 변수명 충돌 우려가 있을 때 | ❌ 또는 별칭 사용 |
| 단일 값만 필요할 때 | ❌ |
| 디버깅용 로그나 전달용 객체일 때 | ❌ |
🔚 마무리 정리
| 장점 | 주의점 |
|---|---|
| 코드가 짧고 깔끔해짐 | 구조가 너무 복잡하면 가독성 저하 |
| 필요한 값만 명확하게 꺼냄 | 과도한 변수 선언, 네이밍 충돌 가능 |
| 유지보수/리팩터링에 유리 | 객체 구조 변경에 민감함 |
✍️ 한 줄 요약
“구조분해는 잘 쓰면 깔끔한 칼, 남용하면 위험한 칼”입니다.
언제 꺼내 쓸지 잘 판단하는 눈이 중요해요 👀”
프론트엔드 개발쟈!!