비구조화(destructure)

 

https://www.robinwieruch.de/react-pass-props-to-component/#react-component-props-by-example

How to use Props in React

 

+

from chatGPT

리액트에서(그리고 일반적인 자바스크립트 프로그래밍에서) "비구조화"는 배열이나 객체에서 값을 추출하여 변수에 더 간결하고 가독성 있게 할당하는 방법을 말합니다. 이는 복잡한 데이터 구조에서 특정 값을 접근하고 사용하기 위해 사용되는 약식 구문입니다.

비구조화는 특히 여러 속성 또는 요소를 가진 객체나 배열이 있는 경우에 유용하며, 그 중 일부 속성이나 요소만 사용해야 할 때 특히 유용합니다.

다음은 비구조화의 간단한 설명입니다.

1. **객체 비구조화:**
   여러 속성을 가진 객체가 있는 경우, 특정 속성의 값을 변수로 추출할 수 있습니다. 예를 들어:

   const person = { name: 'John', age: 30, location: 'New York' };

   const { name, age } = person;

   console.log(name); // 출력: John
   console.log(age);  // 출력: 30

2. **배열 비구조화:**
   마찬가지로 배열에서 특정 인덱스의 값을 변수로 추출할 수 있습니다. 예를 들어:

   const numbers = [1, 2, 3, 4, 5];

   const [first, second, third] = numbers;

   console.log(first);  // 출력: 1
   console.log(second); // 출력: 2
   console.log(third);  // 출력: 3

리액트 컨텍스트에서 비구조화는 주로 함수형 컴포넌트 내에서 프롭과 상태 값을 추출하는 데 사용됩니다. 이를 통해 복잡한 데이터 구조를 컴포넌트에 전달할 때 코드를 더 읽기 쉽고 이해하기 쉽게 만들 수 있습니다.

예를 들어, 프롭을 받는 리액트 함수형 컴포넌트를 생각해봅시다:

function MyComponent({ title, description }) {
  return (
    <div>
      <h1>{title}</h1>
      <p>{description}</p>
    </div>
  );
}

이 예제에서 `title`과 `description`을 `props` 객체에서 비구조화하는 것은 컴포넌트 코드를 더 깨끗하고 명확하게 만듭니다.