구조 분해 할당

📍구조 분해 할당(비구조화 할당)이란

구조 분해 할당(Destructuring Assignment)은 JavaScript에서 배열이나 객체의 값을 간편하게 추출하여 변수에 할당할 수 있는 문법입니다. 이 문법을 사용하면 코드가 더 간결하고 가독성이 좋아집니다.

 

📍기본 문법

: 비구조화 할당의 기본 구조는 좌측에는 변수, 우측에는 해당 변수에 넣어지는 값을 표현한다.
배열의 경우 []를 사용하고, 객체의 경우 {}를 사용한다.

 

 

 

📍예시

☑️ ex) 1

const Row = ({ title, id, fetchUrl }) => { ... }

• ({ title, id, fetchUrl })는 props 객체에서 title, id, fetchUrl을 구조 분해하여 변수로 사용하는 것입니다.
• 즉, Row 컴포넌트가 호출될 때 전달된 props에서 이 세 가지 값을 추출하여 사용할 수 있게 됩니다.

예를 들어, Row가 Mainpage.js 같은 곳에 다음과 같이 호출되었다면:

<Row title="Popular Movies" id={1} fetchUrl="/api/movies" />

이 경우 title은 "Popular Movies", id는 1, fetchUrl은 "/api/movies"로 설정됩니다.

 

☑️  ex) 2

컴포넌트에서 props를 조회하는 코드를 더 짧게 구현하는 코드 (비구조화 할당)

import React from 'react';
import {Text, View} from 'react-native';

function PropsNotSeparated(props) {
  return (
    <View>
      <Text>name: {props.name}</Text>
      <Text>birth: {props.birth}</Text>
    </View>
  );
}

위는 props를 객체로 받고 있음 

 

 

☑️  ex) 3

function PropsSeparated({name, birth}) {
  return (
    <View>
      <Text>name: {name}</Text>
      <Text>birth: {birth}</Text>
    </View>
  );
}

export default PropsSeparated;

위는 props를 객체 구조 분해 할당하여 받고 있음 

 

 

참고 ) 

app.js 에서는 

import React from 'react';
import {SafeAreaView} from 'react-native';
import PropsSeparated from './component/PropsSeparated';

const App = () => {
  return (
    <SafeAreaView>
      <PropsSeparated name="devbeekei" birth="10월 20일" />
    </SafeAreaView>
  );
};

export default App;

 

 

📍 1. { 객체 구조분해할당} 

 

☑️ 객체란

- 데이터를 구조화하여 저장하는 데 사용되는 데이터 타입

- 객체는 키-값 쌍으로 구성되어 있으며, 각 키는 문자열(또는 심볼)이고, 값은 다양한 데이터 타입(문자열, 숫자, 배열, 함수 등)을 가질 수 있음

 

1) 객체의 구조

• 키: 객체의 속성을 나타내는 문자열입니다.
• 값: 키에 해당하는 데이터로, 다양한 데이터 타입일 수 있습니다.

예시 객체

const person = {
  name: 'Alice',
  age: 30,
  city: 'New York'
};

 

객채: person

위 객체는 세 개의 속성을 가지고 있습니다:

• name: 문자열 'Alice'
• age: 숫자 30
• city: 문자열 'New York'

 

☑️ {객체 구조분해할당} 예시

 

const person = {

name: 'Alice',

age: 30,

city: 'New York'

};

// 구조 분해 할당

const { name, age } = person;

console.log(name); // 'Alice'

console.log(age);  // 30

설명

• const { name, age } = person;에서 person 객체의 name과 age 속성을 각각 변수로 추출합니다.
• 이렇게 하면 person.name과 person.age를 매번 쓰지 않고도 해당 값을 사용할 수 있습니다.

 

☑️ 전개 연산자 ... 이용

: 1:1로 값이 매칭되는 것이 아니라, 하나의 값은 변수에 넣고 나머지는 나머지 변수에 할당도 가능.

전개 연산자인 ...을 이용하면 매칭된 값 외 모든 데이터 값을 할당할 수 있음.

{...movieSelected}

객체 분해 할당을 사용하여 movieSelected 객체의 모든 속성을 <MovieModal> 컴포넌트의 props로 전달하는 것을 의미

 

📍 2. [배열의 구조 분해 할당]

 

 

☑️ 예시

const colors = ['red', 'green', 'blue'];

// 구조 분해 할당

const [firstColor, secondColor] = colors;

console.log(firstColor);  // 'red'

console.log(secondColor); // 'green'

설명

• const [firstColor, secondColor] = colors;에서 colors 배열의 첫 번째와 두 번째 값을 각각 firstColor와 secondColor 변수에 할당합니다.
• 배열의 인덱스 순서에 따라 값을 추출하므로, 인덱스를 따로 지정할 필요가 없습니다.

 

☑️ 전개 연산자 ... 이용

: 1:1로 값이 매칭되는 것이 아니라, 하나의 값은 변수에 넣고 나머지는 나머지 변수에 할당도 가능.

전개 연산자인 ...을 이용하면 매칭된 값 외 모든 데이터 값을 할당할 수 있음.

• ...을 이용하면 하나의 변수를 할당하고 나머지 값들을 모두 넣어준다.
• ...인 전개 연산자를 사용하려면 반드시 가장 마지막 요소에 넣어줘야한다.

 

📍 3. 기본값 설정

구조 분해 할당 시 기본값을 설정할 수도 있습니다.

예시

const person = {

name: 'Alice',

age: 30

};

// 기본값 설정

const { name, age, city = 'Unknown' } = person;

console.log(city); // 'Unknown'

설명

• city 속성이 person 객체에 없지만 기본값 'Unknown'을 설정했기 때문에, city 변수는 'Unknown'으로 초기화됩니다.

 

📍 4. 중첩 구조 분해 할당

구조 분해 할당은 중첩된 객체나 배열에서도 사용할 수 있음

const user = {
  id: 1,
  profile: {
    name: 'Alice',
    age: 25
  }
};

// 중첩 구조 분해 할당
const { profile: { name, age } } = user;

console.log(name); // Alice
console.log(age); // 25

 

 

https://velog.io/@kimhyesu-_-/JavaScript-%EB%B9%84%EA%B5%AC%EC%A1%B0%ED%99%94-%ED%95%A0%EB%8B%B9%EA%B5%AC%EC%A1%B0%EB%B6%84%ED%95%B4%ED%95%A0%EB%8B%B9

[JavaScript] 비구조화 할당/구조분해할당