Destructuring assignment(구조분해할당)

destructuring assignment(구조분해할당)

• 배열,객체의 각 요소를 한번에 개별 변수로 담을 수 있음.
• 원래 변수에서 어떤 값을 분해해 할당할지 정의함.

<배열 구조 분해>

1. 배열의 형태 맞추고
2. 순서 맞추면 됨. (받는 변수의 이름은 상관 없음)

// 예제1 - 기본예제
      const [a, b, c, d, e] = [1, 2, 3, 4, 5];

      console.log(a); // 1
      console.log(b); // 2

// 예제2 - 변수에 배열의 나머지를 할당하기
      let [first, ...x] = ['a', 'b', 'c', 'd'];

      console.log(first, x); // a, [b,c,d]

// 예제3 - 해당값이 없을때 기본값 설정해주기
      let [a, b, c = 'cherry'] = ['apple', 'banana'];

      console.log(a, b, c); // apple, banana, cherry

// 예제4 - a,b의 각 값을 바꾸기
      let a = 1;
      let b = 2;
      [b, a] = [a, b];

      console.log(a, b); // 2,1

✔️ 배열 구조 분해 할당으로 swap하기

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

[arr[0], arr[1]] = [1, 2]; // [1,2,3,4,5]
[arr[0], arr[1]] = [arr[1], arr[0]]; // [1,2,3,4,5]

<객체 구조 분해>

• 배열은 받을 변수의 인덱스 순서를 생각해야 하는데,
• 객체는 프로퍼티명만 맞으면 되서 순서 신경쓸 필요 없음.

1. 객체의 형태 맞추고
2. 키값 맞추면 됨 (순서는 상관 없음)

// 객체 예제1
      let { age, name } = { name: 'jihyun', age: 20 };
      console.log(name, age); // jihyun,20

//객체 예제2
      let { a, b, ...x } = { a: 10, b: 20, c: 30, d: 40 };
      console.log(a, b, x); // 10, 20, {c:30,d:40}

//객체 예제3 - 새로운 변수 이름으로 할당
      let obj = { p: 42, q: true };
      let { p: foo, q: bar } = obj;
      console.log(foo, bar); // 42,true

// 객체 예제4 - 리액트에서 prop를 구조분해로 받기-------------------------------------
// 1) App.tsx
const App = ()=>{
  const mapData = [
  { lat: 33.440689, lng: 126.920708, name: 'welding', active: true, error: true },
  { lat: 33.349512, lng: 126.611391, name: 'dump', active: false, error: false },
  { lat: 33.494913, lng: 126.897931, name: 'conveyer', active: true, error: true }, //

]
  
 return  (
     {mapData.map((el, idx) => (
      <MarkerRender key={idx} el={el} id={idx} />
      ))}
	}
 )
    
// 2) MarkerRender.tsx
 const MarkerRender = (props) => {
    console.log(props) 
 }
 
 // props = {el:{lat: 33.246541, lng: 126.401018, name: 'crain', active: false, error: false} , id: 1}

// 3) 구조분해로 받으면 바로 해당 값만 변수에 담아 쓸 수 있음!
 const {el,id} = props
 // el = {lat: 33.246541, lng: 126.401018, name: 'crain', active: false, error: false}
 // id = 1
 
// 4) 
 const MarkerRender = ({el,id}) => {
    console.log(el) // {lat: 33.246541, lng: 126.401018, name: 'crain', active: false, error: false}
    console.log(id) // 1
 }