스프레드 연산자를 사용하여 React에서 모든 소품 전달

웹 개발자는 재사용 가능한 구성 요소를 만들고 불필요한 코드 작성을 피할 수 있기 때문에 React를 좋아합니다. 그러나 구성 요소를 재사용하는 것은 반복을 피하기 위해 특정 요소를 저장하는 변수 이름을 고수하는 것이 아닙니다.

React의 구성 요소 시스템은 고급이며 하위 구성 요소의 내부 콘텐츠, 모양 및 기능까지 사용자 지정할 수 있습니다. 부모에서 자식으로 값을 전달하는 데 사용되는 props 개체 덕분에 가능합니다.

이 문서에서는 모든 props를 자식에게 전달하는 방법과 자식 구성 요소 내에서 props를 통해 전달되는 예측할 수 없는 수의 값을 처리하는 방법을 설명합니다.

Spread(...) 연산자를 사용하여 모든 props 전달

확산 구문은 JavaScript의 새로운 기능입니다. 배열, 문자열 및 개체와 함께 사용할 때 다른 기능을 갖습니다. 이 경우 props 개체를 사용하여 부모에서 자식으로 값을 전달합니다.

확산 구문은 간단합니다. 여러 속성을 가진 개체가 있다고 가정해 보겠습니다.

const obj {
    propertyOne: 1,
    propertyTwo: 2,
    propertyThree: 3,
    propertyFour: 4
}

세 개의 점(...)을 사용하여 다른 객체의 모든 키-값 쌍을 복사할 수 있습니다.

const copy = {...obj}

props를 사용할 때 props 개체는 수동으로 전달하려는 모든 속성을 저장합니다. 별도의 props 개체가 있는 경우 동일한 spread 구문을 사용하여 기존 개체의 모든 값을 복사하고 전달할 수 있습니다.

아래의 예를 살펴보겠습니다.

export default function App() {
  const props = { firstName: "Irakli", lastName: "Tchigladze" };
  return (
    <div className="App">
      <Hello {...props} />
    </div>
  );
}

function Hello({ firstName, lastName }) {
  return (
    <div>
      <h1>Hello, {firstName + " " + lastName}</h1>
    </div>
  );
}

이렇게 하면 <Hello> 구성 요소에 대한 속성을 하나씩 설정할 필요가 없습니다. 대신 props 개체의 모든 속성을 하위 구성 요소에서 사용할 수 있습니다. 예를 들어 아래의 위 코드 펜스에 대한 출력을 참조하십시오.

출력:

Hello, Irakli Tchigladze

하나를 제외한 모든 소품 전달

props 개체의 일부 값을 전달할 수도 있지만 하나 또는 두 개의 속성은 제외할 수 있습니다.

export default function App() {
  const props = { size: 20, firstName: "Irakli", lastName: "Tchigladze" };
  const { size, ...other } = props;
  return (
    <div className="App" style={{ fontSize: size }}>
      <Hello {...props} />
    </div>
  );
}

function Hello({ firstName, lastName }) {
  return (
    <div>
      <h1>Hello, {firstName + " " + lastName}</h1>
    </div>
  );
}

이 예제에서 props 개체에는 size, firstName 및 lastName의 세 가지 속성이 있습니다.

Destructuring을 사용하여 size 속성을 안전하게 사용하여 요소의 스타일을 지정합니다(글꼴 크기 지정). 그러나 여전히 나머지 속성을 <Child> 구성 요소로 전달할 수 있습니다.