[Javascript] 구조 분해 할당

https://pixabay.com/ko/photos/해바라기-꽃들-노란-꽃-꽃잎-6515860/

얼마 전 코드 리뷰를 해주시는 팀원으로부터 '구조 분해 할당 준수 필요!'라는 내용의 피드백을 받았습니다.

덕분에 '구조 분해 할당'이라는 키워드도 알게 됐고, 이번 글에서는 '구조 분해 할당'에 대해 찾아본 내용을 정리하려 합니다.

 

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 값들을 개별 변수에 저장하는 Javascript의 표현식입니다.

 

사용 예시

구조 분해 할당 - 배열 예시

// 구조 분해 할당 - 배열 예시
// 구조 분해 할당 - 기본 사용 예시
let arr = [1, 2, 3, 4, 5]

let [ first, second, ...rest ] = arr;

console.log("frist: ", first); // first: 1
console.log("second: ", second); // second: 2
console.log("rest: ", rest); // rest: [ 3, 4, 5 ]

// 구조 분해 할당 - 기본 값 설정
arr = [1];

let [a=100, b=200] = arr;

console.log("a: ", a); // a: 1
console.log("b: ", b); // b: 200

// 구조 분해 할당 - 일부 반환 값 무시
arr = [1, 2, 3];

let [ , c, ] = arr;

console.log("c: ", c) // c: 2

 

구조 분해 할당 객체 예시

// 구조 분해 할당 - 객체 예시
// 구조 분해 할당 - 기본 사용 예시
var test_object = { x: 100, y: 200 };
var { x, y } = test_object;

console.log("x: ", x); // x: 100
console.log("y: ", y); // y: 200

// 구조 분해 할당 - 새로운 변수 이름으로 할당
var { x: xx, y: yy } = test_object;
console.log("xx: ", xx) // xx: 100
console.log("yy: ", yy) // yy: 200

// 구조 분해 할당 - 기본 값 설정
var { a = 100, b = 200} = { a: 1 };
console.log("a: ", a); // a: 1
console.log("b: ", b); // b: 200

 

활용 

구조 분해 할당은 React에서도 적용할 수 있습니다.

주로 부모 컴포넌트로부터 전달받은 props가 여러 개일 때 사용하며 사용 예시는 아래와 같습니다.

 

예시

TestPage.js

import React from 'react';
import TestComponent from '../components/TestComponent';

const A = 100;
const B = 200;
const C = 300;

function TestPage () {
    return (
        <div>
            <TestComponent A={A} B={B} C={C}/>
        </div>
    );
}

export default TestPage;

 

TestComponent.js

import React from 'react';

function TestComponent (props) {
    // 부모 컴포넌트(TestPage)로부터 전달받은 props에 구조 분해 할당 수행
    // 전달받은 props가 많을수록 유용하게 사용할 수 있음!
    const { A, B, C } = props;

    return (
        <div>
            <div>{`A: ${A}`}</div>
            <div>{`B: ${B}`}</div>
            <div>{`C: ${C}`}</div>
        </div>
    );
}

export default TestComponent;

 

효과

React에서 구조 분해 할당을 사용하는 이유는 아래와 같이 두 가지가 있습니다.

1. 부모 컴포넌트로부터 넘어온 props에 어떤 키가 들어있는지 쉽게 파악할 수 있어 가독성 증가

2. props.를 일일이 붙이지 않아도 되므로 편리성 증가

 

특히 프로젝트 규모가 커지고 코드가 많아질수록 가독성 측면에서 구조 분해 할당을 잘 쓰는 게 중요합니다.

 

---

참고 자료

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

https://learnjs.vlpt.us/useful/06-destructuring.html

 

읽어 주셔서 감사합니다 :)

잘못된 부분이 있다면 댓글로 편히 알려주세요😊