[📝 Front - React] 비구조화 할당에 대한 스터디

React에서 비구조화 할당(Destructuring Assignment) 은 JavaScript의 ES6(ECMAScript 2015) 문법으로, 배열이나 객체에서 필요한 값만 꺼내와 변수에 할당하는 것을 더욱 간결하게 만들어주는 기능입니다. React 개발에서 컴포넌트의 props나 state를 다룰 때 매우 빈번하게 사용됩니다.

1. 비구조화 할당이란? (JavaScript 개념)

비구조화 할당은 다음과 같은 두 가지 주요 형태로 나뉩니다.

1.1. 객체 비구조화 할당 (Object Destructuring)

객체의 속성(property)을 해체(destructure)하여 그 값을 새로운 변수에 할당합니다. 이때 변수명은 객체의 속성명과 동일해야 합니다.

// 기존 방식
const person = { name: 'Alice', age: 30 };
const name = person.name;
const age = person.age;
console.log(name, age); // Alice 30

// 객체 비구조화 할당
const person = { name: 'Alice', age: 30 };
const { name, age } = person; // person 객체에서 name과 age 속성을 꺼내와 변수에 할당
console.log(name, age); // Alice 30

• 별칭(Alias) 사용: 다른 변수명으로 할당하고 싶을 때 속성명: 새변수명 형식을 사용합니다.

  const user = { userId: 1, userName: 'Bob' };
  const { userId: id, userName: name } = user; // userId를 id로, userName을 name으로 할당
  console.log(id, name); // 1 Bob
  

• 기본값(Default Value) 설정: 속성이 존재하지 않을 경우를 대비해 기본값을 지정할 수 있습니다.

  const product = { id: 101, price: 5000 };
  const { id, price, quantity = 1 } = product; // quantity가 없으면 기본값 1 할당
  console.log(id, price, quantity); // 101 5000 1
  

1.2. 배열 비구조화 할당 (Array Destructuring)

배열의 요소를 해체하여 그 값을 새로운 변수에 할당합니다. 이때 변수명은 중요하지 않고, 순서에 따라 할당됩니다.

// 기존 방식
const colors = ['red', 'green', 'blue'];
const firstColor = colors[0];
const secondColor = colors[1];
console.log(firstColor, secondColor); // red green

// 배열 비구조화 할당
const colors = ['red', 'green', 'blue'];
const [firstColor, secondColor, thirdColor] = colors;
console.log(firstColor, secondColor, thirdColor); // red green blue

// 일부 요소만 필요할 때
const [c1, , c3] = colors; // 중간 요소 건너뛰기
console.log(c1, c3); // red blue

// 기본값 설정
const items = ['apple'];
const [item1, item2 = 'banana'] = items;
console.log(item1, item2); // apple banana

 

2. React에서 비구조화 할당 활용

React 개발에서 비구조화 할당은 props 객체와 state 객체, 그리고 Hooks(특히 useState)를 사용할 때 그 진가를 발휘합니다.

2.1. Props 비구조화 할당

컴포넌트에 전달되는 props는 객체 형태로 전달되므로, 객체 비구조화 할당을 사용하여 필요한 props만 간결하게 꺼내올 수 있습니다.

// 기존 방식
function MyComponent(props) {
  const title = props.title;
  const description = props.description;
  return (
    <div>
      <h1>{title}</h1>
      <p>{description}</p>
    </div>
  );
}

// Props 비구조화 할당 (권장)
function MyComponent({ title, description }) { // 함수 매개변수에서 바로 비구조화 할당
  return (
    <div>
      <h1>{title}</h1>
      <p>{description}</p>
    </div>
  );
}

// 사용 예시
<MyComponent title="Hello React" description="Learn Destructuring Assignment" />

2.2. State 비구조화 할당 (useState Hooks와 함께)

React Hooks의 useState는 배열을 반환하므로, 배열 비구조화 할당을 사용하여 상태 변수와 상태 업데이트 함수를 간결하게 가져올 수 있습니다.

import React, { useState } from 'react';

// 기존 방식 (useState를 반환값을 직접 사용하는 경우 - 드묾)
function Counter() {
  const stateTuple = useState(0); // stateTuple = [count, setCount]
  const count = stateTuple[0];
  const setCount = stateTuple[1];

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

// useState Hooks와 배열 비구조화 할당 (권장)
function Counter() {
  const [count, setCount] = useState(0); // 배열 비구조화 할당으로 count와 setCount를 바로 얻음

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>Increment</button>
    </div>
  );
}

2.3. Context API 및 Custom Hooks에서 활용

Context API나 Custom Hooks에서 객체나 배열을 반환할 때도 비구조화 할당이 유용하게 사용됩니다.

// Context API 예시
import React, { useContext } from 'react';
import { UserContext } from './UserContext';

function UserProfile() {
  const { user, updateUser } = useContext(UserContext); // 객체 비구조화 할당
  return (
    <div>
      <h2>{user.name}</h2>
      <button onClick={() => updateUser({ ...user, age: user.age + 1 })}>
        나이 증가
      </button>
    </div>
  );
}

// Custom Hook 예시
function useFormInput(initialValue) {
  const [value, setValue] = useState(initialValue);
  const handleChange = (e) => setValue(e.target.value);
  return { value, onChange: handleChange }; // 객체 반환
}

function MyForm() {
  const { value: name, onChange: handleNameChange } = useFormInput(''); // 객체 비구조화 할당과 별칭 사용
  // ...
}

비구조화 할당의 장점

• 코드 가독성 향상: 필요한 데이터를 명확하게 표시하고, 반복적인 객체.속성명 접근을 줄여 코드를 더 깔끔하게 만듭니다.
• 유지보수 용이성: 어떤 데이터가 사용되는지 한눈에 파악하기 쉽습니다.
• 생산성 향상: 더 적은 코드로 동일한 작업을 수행할 수 있습니다.
• 오류 감소: 변수명 오타로 인한 undefined 접근 오류를 줄이는 데 도움이 됩니다.

React 개발에서 비구조화 할당은 코드의 핵심적인 부분을 차지하며, 이를 숙지하면 더욱 효율적이고 가독성 높은 코드를 작성할 수 있습니다.