React - 구조분해할당

1) 구조분해할당

• 구조분해할당 이란? 객체나 배열로부터 속성과 요소를 쉽게 추출해서 그 값을 개별 변수에 할당할 수 있게 하는 Javascript 표현식을 말한다.

예제 코드 1)

// 1
const animal = ["고양이", "강아지"];
console.log(animal[0]); // 고양이
console.log(animal[1]); // 강아지

// 2
const [cat, dog] = ["고양이", "강아지"];
console.log(cat); // 고양이
console.log(dog); // 강아지

1번 코드 요약)

• animal이라는 변수에 고양이, 강아지 라는 배열을 가진 문자열 값들이 있고, 여기서 각각의 요소를 출력하고자 한다면 매번 animals[0], animals[1] 과 같이 해당 배열의 몇 번째 요소라는 인덱스 값을 통해 접근해야하는 번거로움이 있다.

2번 코드 요약)

• 1번 코드와 달리 2번 코드는 구조분해할당을 사용하게 되면 animals의 첫 번째 요소인 “고양이”를 변수 cat에, 두 번째 요소인 “강아지”를 변수 dog에 각각 할당할 수 있게 되므로, 매번 인덱스를 통해 배열의 요소에 접근하는 것이 아니라 할당된 변수를 통해 간단하게 배열의 요소를 불러올 수 있다.

예제 코드 2)

// 부모 컴포넌트
import React from 'react';
import ParentComponent from '../../Components';

const ParentComponent = () => {
  const user = {
    name: '예시 사용자',
    age: 25,
    address: '서울시'
  };
  
  // 부모 컴포넌트에서 자식 컴포넌트인 MyComponent를 호출할 때 props를 전달함
  return <MyComponent {...user} />;
};

export default ParentComponent;

// 자식 컴포넌트
import React from 'react';

// 구조 분해 할당을 이용하여 props를 추출하여 사용하는 함수형 컴포넌트 예시
const MyComponent = ({ name, age, address }) => {
  return (
    <div>
      <h2>{`안녕하세요, ${name}님!`}</h2>
      <p>{`나이는 ${age}살이고, 주소는 ${address}입니다.`}</p>
    </div>
  );
};

export default MyComponent;

코드 요약)

• 부모 컴포넌트인 ParentComponent에서 user를 객체로 만들고 MyComponent 라는 공용(자식)컴포넌트에 prop 으로 전달하고 있다. 그리고 자식 컴포넌트인 MyComponent에 name, age, address를 구조분해할당으로 처리해 인자로 넣어주면 MyComponent 내부에서 prop.name, prop.age, prop.address로 하지 않아도 name, age, address 라는 이름으로 직접적으로 사용할 수 있게 된다.

결론)

• 구조분해할당은 객체나 배열로 부터 속성과 요소를 쉽게 추출해서 사용하기 때문에 코드를 보다 간결하고 가독성 있게 작성할 수 있다는 장점이 있다.