[React] "구조분해할당"이라고 들어보셨나요??

JavaScript ES6 문법을 접하면서 구조분해할당 개념이란 것을 정확히 이해하게 되었다.

React를 사용하는 프론트엔드 개발자라면 이 문법이 얼마나 필요한지 얼마나 컴포넌트를 다루는 데에 있어서 편리한지 알지 않을까?

하지만 이 개념 자체를 정확히 이해하지 않고 사용하는 개발자들이 많다고 생각이 든다.

그래서 오늘은 이 개념에 대해 정리해보고자 한다.

 

---

구조분해할당이란?

구조분해할당은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이며,

이 문법을 사용하면 코드를 더 간결하고 가독성 있게 작성할 수 있다는 장점이 있다.

React에서는 특히 props나 state를 다룰 때 매우 유용하게 사용된다!

 

아래 예시코드를 살펴보자.

const student = {
    name: '김철수',
    age: 20,
    grade: 'A'
};

// 구조분해할당 사용
const { name, age, grade } = student;
console.log(name);  // '김철수'
console.log(age);   // 20
console.log(grade); // 'A'

이 코드에서는 student 객체의 속성들을 개별 변수로 분리했다.

이렇게 하면 student.name, student.age와 같이 매번 객체명을 반복해서 작성할 필요가 없어진다.

---

React에서는 어떻게 활용될까?

1. 컴포넌트 props 구조분해할당

// 구조분해할당 사용 전
function UserProfile(props) {
    return (
        <div>
            <h2>{props.username}</h2>
            <p>{props.email}</p>
        </div>
    );
}

// 구조분해할당 사용 후
function UserProfile({ username, email }) {
    return (
        <div>
            <h2>{username}</h2>
            <p>{email}</p>
        </div>
    );
}

이 예시에서는 props 객체를 구조분해할당하여 코드를 더 간결하게 만들었다.

props.username 대신 바로 username을 사용할 수 있어 가독성 향상에 도움이 되는 것을 볼 수 있다!!!

 

2. useState 구조분해할당

import { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);
    
    return (
        <button onClick={() => setCount(count + 1)}>
            카운트: {count}
        </button>
    );
}

useState 훅을 사용할 때도 구조분해할당이 사용된다.

배열의 첫 번째 요소는 상태 값이고, 두 번째 요소는 그 상태를 변경하는 함수다.

 

3. 기본값 설정

구조분해할당을 사용할 때 기본값을 설정할 수 있다는 점도 매우 유용하다.

function UserInfo({ name = '익명', age = 0 }) {
    return (
        <div>
            <p>이름: {name}</p>
            <p>나이: {age}</p>
        </div>
    );
}

이 코드에서는 props로 name이나 age가 전달되지 않았을 때 사용할 기본값을 지정했다.

(이를 통해 컴포넌트의 안정성을 높일 수 있다!)

 

4. 중첩된 객체의 구조분해할당

const user = {
    info: {
        name: '김철수',
        address: {
            city: '서울',
            district: '강남구'
        }
    }
};

const { info: { name, address: { city } } } = user;
console.log(name);  // '김철수'
console.log(city);  // '서울'

중첩된 객체에서도 구조분해할당을 사용할 수 있다.

이는 복잡한 데이터 구조를 다룰 때 특히 유용하다!