[React] 구조 분해 할당(Destructing Assignment)

우지끈·2024년 10월 31일

구조 분해 할당

구조 분해 할당 문법은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다. (출처: MDN)

이름 그대로 구조를 분해하고 할당하는 것이다. 이를 통해 객체나 배열의 내부 데이터를 간단하고 직관적으로 추출할 수 있다.

배열의 구조 분해 할당

const fruits = ["apple", "banana", "cherry"];

// 일반적인 변수 할당 방법
const firstFruit = fruits[0];
const secondFruit = fruits[1];

// 구조 분해 할당
let [firstFruit, secondFruit] = fruits;

위 예시를 보면 알 수 있듯이 구조 분해 할당을 사용하면 더 간단하고 가독성이 높은 코드를 작성할 수 있다.

그리고 배열 내에서 특정 요소만을 추출하고 싶은 경우, 빈 공간 ( ,) 을 통해 특정 인덱스를 건너뛸 수도 있다.

const fruits = ["apple", "banana", "cherry", "orange"]
const [fitstFruit, , thirdFruit] = fruits;

console.log(firstFruit);  // "apple"
console.log(thirdFruit);  // "cherry"

위 예시처럼 빈 공간을 사용해 중간의 요소를 건너뛰고 원하는 위치의 요소만 추출할 수도 있는 것이다.

객체의 구조 분해 할당

const person = {
  name: "Alice",
  age: 25,
  city: "Seoul"
};

// 일반적인 변수 할당 방법
const name = person.name;
const age = person.age;

// 구조 분해 할당
const { name, age } = person;

객체 또한 위와 같은 구조 분해 할당을 통해 객체의 속성을 손쉽게 변수로 추출할 수 있다. 구조 분해 할당의 결과로 person 객체의 name 속성은 name 변수에, age 속성은 age 변수에 각각 할당된다.

변수명을 다르게 사용하고 싶은 경우에는 다음과 같이 작성하면 된다.

const { name: personName, age: personAge } = person;

이 경우 name 속성은 personName 변수에, age 속성은 personAge 변수에 할당될 것이다.

그리고 기본값도 설정해둘 수 있다.

const person = {
  name: "Alice",
  age: 25,
  city: "Seoul"
};

const { name, country = "Unknown" } = person;
console.log(country);  // "Unknown"

위의 경우 person 객체에 country 속성이 없지만, 기본값이 "Unknown" 으로 설정되어 있기에 기본값이 출력된다.

그러나, person 객체에 country 속성이 있는 경우에는 기본값 대신 해당 속성의 값이 사용된다.

const person = {
  name: "Alice",
  age: 25,
  city: "Seoul"
  country: "Korea"
};

const { name, country = "Unknown" } = person;
console.log(country);  // "Korea"

기본값을 설정해두면 객체에 해당 속성이 없는 경우에도 안전하게 코드를 실행할 수 있어 예상치 못한 오류를 방지하는데 도움이 될 것이다.

배열과 객체의 차이점

배열과 객체는 다른 방식으로 구조 분해 할당이 이루어진다.

배열의 구조 분해 할당

배열은 인덱스 기준으로 값을 추출 -> 순서 중요
변수명은 자유롭게!
특정 요소를 건너뛸 때 빈 공간 ( ,) 사용

객체의 구조 분해 할당

객체는 key를 기준으로 value를 추출 -> 순서 상관 X
변수명은 자유롭게 X (key 이름 사용)
2.1. { key이름: 지정하고 싶은 변수명 } 방식으로 변경은 가능
2.2. 기본값 설정 가능!
건너뛰고 싶은 값이 있으면 단순히 구조 분해 할당에서 제외

리액트에서의 구조 분해 할당

리액트(React)에서는 구조 분해 할당이 매우 자주 사용되는데, 특히 useState 훅을 사용할 때와 함수 컴포넌트 내부에서 props 다룰 때 유용하게 사용된다.

useState 훅에서의 구조 분해 할당

  function Counter() {
    
    // 구조 분해 할당 X
    const count = useState(0)[0];
    const setCount = useState(0)[1];
    
    // 구조 분해 할당 O
    const [count, setCount] = useState(0); 

    return (
      <div>
        <p>현재 카운트: {count}</p>
        <button onClick={() => setCount(count + 1)}>증가</button>
      </div>
    );
  }

useState(0) 은 두 개의 값을 포함하는 배열을 반환한다. 첫 번재 값은 상태 변수인 count이고, 두 번째 값은 setCount 함수로 count 값을 업데이트하는 데 사용된다.
위 코드와 같이 구조 분해 할당을 사용하면 이 두 값을 각각 변수로 쉽게 추출할 수 있다.

함수 컴포넌트에서의 props 구조 분해 할당

구조 분해 할당을 하지 않은 예시는 다음과 같다.

// 부모 컴포넌트
function App() {
  const userName = "홍길동";
  const userAge = 25;

  return (
    <div>
      <Greeting name={userName} age={userAge} />
    </div>
  );
}

// 자식 컴포넌트
function Greeting(props) {
  return (
    <div>
      <p>안녕하세요, {props.name}님!</p>
      <p>나이: {props.age}세</p>
    </div>
  );
}

부모 컴포넌트로부터 props 객체를 받아와 props.name 과 props.age 로 직접 접근하여 값을 출력하고 있다.

그러나 구조 분해 할당을 통해 다음과 같이 코드를 수정할 수 있다.

// 부모 컴포넌트
function App() {
  const userName = "홍길동";
  const userAge = 25;

  return (
    <div>
      <Greeting name={userName} age={userAge} />
    </div>
  );
}

// 자식 컴포넌트
function Greeting({ name, age }) {
  return (
    <div>
      <p>안녕하세요, {name}님!</p>
      <p>나이: {age}세</p>
    </div>
  );
}