초보자 친화적인 소품 사용법 튜토리얼입니다. 읽기 전에 구조 분해가 무엇인지, 구성 요소를 사용/생성하는 방법을 이해하는 것이 중요합니다.

속성(property)의 약자인 props를 사용하면 상위 구성 요소에서 하위 구성 요소로 정보를 보낼 수 있으며, 모든 데이터 유형이 될 수 있다는 점에 유의하는 것도 중요합니다.

구성 요소에 대한 소품을 생성하는 구문을 이해하는 것이 중요합니다. React에서는 html 태그에 대한 속성을 작성할 때 동일한 구문을 사용해야 합니다. 소품을 지정하는 방법은 다음과 같이 요소 내에 소품을 넣는 것입니다:

ParentPlant() {
  return  
}

Prop을 생성할 때 기억해야 할 좋은 규칙은 문자열의 값 주위에 중괄호를 사용할 필요가 없으며 다른 데이터 유형에 대해서만 이 작업을 수행한다는 것입니다. 위에서 볼 수 있듯이 상위 구성 요소에 소품을 할당하여 다수의 소품을 가질 수 있습니다. 컴포넌트 내에 props가 있을 때 기술적으로 props를 아래로 전달한다는 점을 아는 것이 중요합니다. 소품을 전달한 후에는 원하는 구성 요소 내에서 소품을 받을 수 있어야 합니다. 이 경우 ChildPlant 구성 요소입니다.

수신 소품:

function ChildPlant(props) {
  return (
    
      {props.text} {props.number}
    >
  )
}

여기에서 수행할 작업은 다음과 같습니다. 1. ChildPlant 구성 요소의 매개변수 내에서 prop을 받습니다. 2. prop의 이름을 통해 prop의 값을 구조화합니다. 우리의 props는 매개변수가 아니라 매개변수와 유사한 기능을 한다는 것을 아는 것이 중요합니다.

상위 구성 요소 데이터를 하위 구성 요소에 전달하는 유일한 방법은 소품을 이용하는 것입니다. 나는 그것을 DNA처럼 생각하고 싶습니다. 상위 구성 요소는 이미 그 안에 존재하는 자체 측면을 보유하고 있습니다. 그 아이는 또한 부모의 DNA 측면을 가질 수 있기 때문에 소품은 그 아이의 머리카락을 빨간색, 검은색 또는 금발로 만드는 활성제처럼 작동합니다.

props는 하위 함수에서 수신되고 상위 함수를 통해 전송되지만 props는 아래로 전송될 수만 있고 다시 위로 전송될 수는 없습니다. 소품도 객체로 생각할 수 있습니다. 이는 본질적으로 키:값 쌍과 유사한 데이터를 보유하기 때문입니다. 매개변수와 유사한 이유를 다시 설명하자면 매개변수 안에 여러 객체를 저장하고 있다는 점입니다. 저는 소품이 플레이스홀더로 받아들여지는 영역을 생각하고 싶습니다. 이는 구성 요소와 공유하려는 일부 객체를 위한 공간을 차지하고 구조 분해 및 점 표기법을 통해 필요할 때 교체합니다.

시각화하는 좋은 방법은 다음과 같습니다.

여기서 정사각형 상자 안에 모든 것을 담고 있는 소품을 시각화할 수 있습니다. 각 소품은 첫 번째 예의 해당 데이터 값을 담고 있습니다. 이제 우리는 prop의 값을 얻기 위해 구조 분해 방법을 사용합니다. 그리고 소품을 간단히 활용하는 방법입니다!