React에서 소품을 분해합니다.

React를 배우는 여정을 시작하면 가장 먼저 배우게 될 것 중 하나는 Props입니다. JavaScript에서 함수와 인수가 작동하는 방식에 이미 익숙하다면 Props를 파악하는 것이 어렵지 않을 것입니다.

소품이란 무엇입니까?

Props는 React 구성 요소에 전달되는 인수이며 Props는 HTML 속성에 의해 구성 요소에도 전달됩니다.

디스트럭처링이란?

개체 및 배열에 저장된 여러 속성에 액세스하는 편리한 방법입니다.

예를 들어 시작하겠습니다.

function App() {
  const car = {
    brand: 'Jeep',
    model: 'gladiator',
    year: '2022',
    color: 'red',
    price: '37,000',
  };

  return (
    <div>
      <cars car={car} />
    </div>
  )
}

function displayCar({car}) {
  return (
    <div>
      <p>My car's brand is, {car.brand}</p>
    </div>
  )
}

여기서 우리는 App 내부에 자동차 개체가 있고 Cars 구성 요소에 소품으로 전달합니다. Cars 구성 요소 내부에서 이제 자동차 개체에 액세스할 수 있습니다.

function displayCar({car}) {
  return (
    <div>
      <p>My car's brand is, {car.brand}</p>
    </div>
  )
}

위에서 볼 수 있듯이 이제 점 표기법을 사용하여 정보에 액세스할 수 있지만 소품을 분해하고 코드를 정리할 수 있다면 어떨까요?
const {brand, model, year, color, price} = car
우리는 자동차 객체를 분해할 수 있고 우리의 코드는 좀 더 깨끗해지고 읽기 쉬운 모드가 될 것입니다.

function displayCar({car}) {
  const {brand, model, color} = car
  return (
    <div>
      <p>My car's brand is, {brand}</p>
      <p>My car's model is, {model}</p>
      <p>My car's color is, {color}</p>
    </div>
  )
}

이것이 화면에 표시되는 것입니다.
My car's brand is, Jeep
My car's model is, gladiator
My car's color is, red
초보자의 관점에서 이것은 구조를 분해하는 간단한 방법 중 하나이지만 유일한 방법은 아닙니다. 작업 중인 데이터의 양이 상당할 때 상황이 정말 빠르게 복잡해질 수 있습니다.

자원:
https://reactjs.org/docs/components-and-props.html
반응 이미지: